圖解 利用vue-cli2 腳手架建立項目

最新圖解 利用vue-cli2 腳手架建立項目

搭建的環境是 vue-cli2，vue2，webpack 3。

首先你的node環境是搭好的

node -v
複製代碼

1、安裝vue-cli

首先全局安裝vue-cli，這裏使用的是cnpm（淘寶鏡像）沒有就用npm，強烈創建更換淘寶鏡像，npm很慢。。

cnpm i -g vue-cli
複製代碼

使用 vue 檢查是否成功 以下這樣就是成功了

二：建立項目

在你想建立項目的文件夾裏打開cmd 這裏使用的是webpack模版

使用 vue list 看來支持的模板
複製代碼

使用 vue init webpack my-project（my-project爲項目名）
複製代碼

而後就是根據提示操做就行。 **對於初學者，我建議的是 ** vue-router 選擇 n （vue的路由，根據你的須要選擇） ESLint 選擇 n （代碼檢測工具，很嚴謹的，若是隻是學習用的話，建議關閉） unit tests 選擇 n （單元測試工具，根據須要選擇） e2e tests 選擇n （端到端測試，根據須要選擇）

而後進入你建立的項目內

cd my-project   （進去項目文件夾）
cnpm i  （安裝依賴，我用cnpm，沒有就用npm）
以下就成功了
複製代碼

3、啓動項目

npm run dev   （在8080端口啓動項目）
複製代碼

一大串代碼事後

最後在瀏覽器地址欄輸入：127.0.0.1:8080 下圖就表示成功了！

建立的項目目錄以下

以上是Vue腳手架的基本的目錄結構，咱們通常編寫代碼都放在src目錄下，這裏有一個components文件夾，該目錄放置自定義組件。src目錄下有一個App.vue，該文件是項目展現的窗口文件。