Vue 五 腳手架

稍微像樣一點的 vue.js 的開發過程，幾乎總是需要使用腳手架的。使用它可以解鎖新的可能：

乙個.vue檔案包含三個部分：標籤包圍內的是模板**；內包圍的是 js **，並且可以使用 es6 的語法。內的則是 css **。

然而，瀏覽器是無法識別這個看起來簡單但是卻不真實的元件的。因此 vue.js 需要做打包，乙個預處理工作，把這樣元件轉換成為瀏覽器可以識別的格式。其中包括：

於是 webpack 首先呼叫 vue-loader，vue-loader 會呼叫 babel 轉換 es6 **為 es5 **，並且把 css 和 html 作為模組也轉換為客戶端 js **。這些 js **瀏覽器就可以識別了。

把 webpack、babel 搭配起來需要很多配置，極為繁瑣。vue.js 提供了乙個工具，叫做vue-cli，它可用於快速搭建應用起步**。

包括：

?‍♀️ 使用：

安裝vue-cli：

npm

install -g vue-cli

使用 vue-cli 建立新專案：

vue init webpack my-project

引數 webpack，指明建立乙個基於 「webpack」 模板的 vuejs 專案。此模板會建立乙個 webpack 的腳手架**。

webpack是乙個打包工具，可以把 js、css、image 打包成乙個或者多個 js 檔案，並且可以支援各種 loader 作為外掛程式，對不同型別的檔案做轉換處理。實際上 webpack 就是通過外掛程式 vue-loader，在載入 vue 型別的檔案時做格式轉換，把 vue 型別檔案翻譯為瀏覽器可以識別的 js 檔案。

當前可以使用的模板有：

cd my-project

npminstall
npm run dev  # vue-cli的版本不同執行命令不同 (此命令為 vue-cli 2)

vue cli 公升級步驟

此時伺服器已經啟動並監聽到 8080 埠，使用瀏覽器訪問http://localhost:8080，可以看到 vue-cli 預設的介面。

在components資料夾下新增.vue檔案，應用單檔案元件。

熱載入測試

如果**被改動了，並不需要重新整理瀏覽器，它會自動更新最新的**過來。

回歸日常

npm run build

有了它們，我就可以使用乙個 http 靜態伺服器，在 dist 目錄內執行：

http-server然後，到http://localhost:8080檢視效果。和執行npm run dev看到的一模一樣。

vue 3 0腳手架 一

本機公升級vue3.0 npm install g vue cli 3.0腳手架建立 vue create 專案名稱 啟動專案 npm run serve 新增外掛程式方式 vue add vuetify vue add axios 也可使用之前npm install 的方式新增 介面會有明顯變化的...

Vue入門（四） 腳手架

這篇部落格來說一下，提了很久的腳手架吧，其實吧，在沒接觸的時候，我也覺得腳手架好厲害的樣子，其實就是幫助我們自動配置一些複雜的 常用的一些配置。它能夠幫助我們快速構建vue開發環境和對應的webpack配置。但是我們需要注意的乙個點 腳手架的使用前提，前面的部落格都說過了，這裡就不說了。安裝的時候我...

Vue3 0腳手架搭建

vue3.0官網 介紹 notice 這份文件是對應 vue cli 3.x 版本的。老版本的 vue cli 文件請移步這裡 vue cli是乙個基於 vue.js 進行快速開發的完整系統，提供 1.通過 vue cli 搭建互動式的專案腳手架。2.通過 vue cli vue cli servi...