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

首先你的node環境是搭好的

一、安裝vue-cli

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

使用 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）
如下就成功了
           

三、啟動項目

npm run dev   （在端口啟動項目）
           

一大串代碼過後

最後在浏覽器位址欄輸入：127.0.0.1:8080

下圖就表示成功了！

建立的項目目錄如下

以上是Vue腳手架的基本的目錄結構，我們一般編寫代碼都放在src目錄下，這裡有一個components檔案夾，該目錄放置自定義元件。src目錄下有一個App.vue，該檔案是項目展示的視窗檔案。