vue cli vue腳手架簡單流程

在做vue的專案時，我們如果不用官方提供的腳手架，我們就必須自己去搭建專案所需要的目錄結構等，同時每次做專案都需要自己搭建顯得麻煩。所以我們只需要使用vue官方提供的vue-cli腳手架工具搭建專案即可。下面我將列出vue-cli簡單搭建流程：

注意：在這裡我會預設大家的電腦已經裝好node環境，如若不熟悉請檢視windows環境之node.js安裝與環境配置，按照流程安裝即可。vue-cli專案

操作步驟圖在此就不具體展示,按照我提供的步驟和注意事項具體操作即可完成對vue-cli專案的搭建。

1、安裝vue-cli

1）、使用npm（需要安裝node環境）全域性安裝webpack，開啟命令列工具輸入npm install webpack -g或者（npm install -g webpack）,安裝完成後輸入webpack-v，如果出現相應的版本號，則說明安裝成功。

2）、利用npm對vue-cli進行全域性安裝，在cmd中輸入命令: npm install -g vue-cli，安裝完成之後輸入 vue -v（注意這裡是大寫的「v」），如果出現相應的版本號，則說明安裝成功。

2、用vue-cli來構建專案

1）、首先在你的磁碟中新建乙個檔案用於存放你的專案，比如我d:\vuedemo1，然後使用命令列cd進入到此專案目錄，然後輸入命令vue init webpack test,，其test是你的專案名。輸入命令後，會跳出幾個選項讓你回答：

回答完畢後就開始構建專案了。

2）、安裝依賴。

注意：上述操作完成之後你的專案中將會多出乙個專案名稱資料夾，再用cd命令進入到此資料夾如d:\vuedemo1\test下輸入命令npm install即可。( 如果安裝速度太

慢。可以安裝**映象，開啟命令列工具，輸入：npm install -g cnpm --registry=然後使用cnpm來安裝 )。

3）、啟動專案

run dev後瀏覽器未自動開啟，你只需找到專案檔案中的config檔案下面的index.js，將autoopenbrowser的false改為true即可。重新輸入npm run dev即可開啟你所的搭建的vue-cli專案。

注意：npm 開啟了npm run dev以後怎麼退出或關閉？使用ctrl+c快捷鍵退出

4)、專案打包　　

注意，自己的專案檔案都需要放到 src 資料夾下。在專案開發完成之後，可以輸入npm run build來進行打包工作。打包完成後，會生成 dist 資料夾，如果已經修改了檔案

路徑，可以直接開啟本地檔案檢視。專案上線時，只需要將dist 資料夾放到伺服器就行了。

5)、所有專案搭建完畢後，各專案檔案結構介紹如下圖：

vue cli vue腳手架 簡單流程