回覆列表
-
1 # 小龍書單
-
2 # SevDot
具體看使用，如果你單純把vue當一個js外掛來使用的話，很簡單直接引入即可：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
如果是想把vue當作一個前端框架來使用的話，推薦使用webpack,而Vue已經提供一套腳手架Vue CLI，接下來我就說說怎麼在Windows下搭建Vue的開發環境：
1. 安裝node，安裝完node以後，會連 npm一起安裝，安裝過程很簡單，可以直接去node.js官網上下載，然後解壓，會得到一個.exe檔案，直接雙擊執行即可。
安裝完成以後分別檢查一下node和npm的版本。
檢查node
結果如下：
檢查npm
結果如下：
可以考慮使用淘寶進行加速 NPM ：
2. 使用Vue提供的腳手架vue cli安裝vue的webpack環境
全域性安裝vue cli
然後建立專案
安裝完成以後會建立一個my-project專案，目錄結構如下：
在my-project目錄下輸入 npm install 安裝依賴，安裝完成以後輸入npm run dev 執行專案，在瀏覽器中輸入localhost：8080訪問專案即可看到初始頁面：
-
3 # NuoHui
首先Vue.js是一個自底向上，漸進式框架，什麼意思呢？指的就是你可以把它只用作view層，這樣就很輕，也可以使用vue以及全家桶開發SPA 或者多頁應用，這樣自然比較重，因為用了很多第三方外掛。
至於如何搭建開發環境，目前由於前端業務複雜，我們大部分時候需要藉助打包工具，推薦webpack，目前主流使用的。
開發時，Vue 會提供很多警告來幫你解決常見的錯誤與陷阱。生產時，這些警告語句卻沒有用，反而會增加你的載荷量。再次，有些警告檢查有小的執行時開銷，生產環境模式下是可以避免的。如果用 Vue 完整獨立版本 (直接用 元素引入 Vue)，生產時應該用精簡版本 ()。如果用 Webpack 或 Browserify 類似的打包工具時，生產狀態會在 Vue 原始碼中由 決定，預設在開發狀態。Webpack 與 Browserify 兩個打包工具都提供方法來覆蓋此變數並使用生產狀態，警告語句也會被精簡掉。每一個 模板有預先配置好的打包工具，但瞭解怎樣配置會更好。使用 Webpack 的
DefinePlugin
轉換你的 bundle 檔案。這可以精簡掉包含在 Vue 原始碼中所有環境變數條件相關程式碼塊內的警告語句。當你需要處理 DOM 內或 JavaScript 內的模板時，“從模板到渲染函式”的編譯就會在線上發生。通常情況下這種處理是足夠快的，但是如果你的應用對效能很敏感最好還是迴避。預編譯模板最簡單的方式就是使用單檔案元件 - 相關的構建設定會自動把預編譯處理好，所以構建好的程式碼已經包含了編譯出來的渲染函式而不是原始的模板字串。如果你使用 Webpack，並且喜歡分離 JavaScript 和模板檔案，你可以使用vue-template-loader
，它也可以在構建過程中把模板檔案轉換成為 JavaScript 渲染函式。當使用單檔案元件時，元件內的 CSS 會以 標籤的方式透過 JavaScript 動態注入。這有一些小小的執行時開銷，如果你使用服務端渲染，這會導致一段“無樣式的內容瞬間 (fouc)”。橫跨所有元件提取 CSS 到同一個檔案迴避這件事情，這也會更好的壓縮和快取 CSS。如果在元件渲染時出現執行錯誤，錯誤將會被傳遞至全域性 配置函式 (如果已設定)。利用這個鉤子函式和錯誤跟蹤服務 (如Sentry
，它為 Vue 提供官方整合)，可能是個不錯的主意。