1、 安裝nodejs環境

首先確保安裝了node

node -v

npm -v

如果能看到node和npm的版本號了，說明已經安裝成功 

注：node版本最好高一點，保險的話直接安裝最新版本的，因為vue執行需要基於npm一定的版本（最好是3.x.x以上），版本低了有可能會出錯，而npm是隨node的安裝自動安裝的，直接安裝最新的node，npm的版本號也會變高的，不用再做更多的操作，當然，也可以手動升級npm版本號（自己百度）

2、安裝vue-cli

有npm和cnpm兩種方式，網上都說cnpm好些，所以我也用的cnpm安裝，

首先利用淘寶映象安裝cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝完成，輸入

cnpm -v

可以檢視當前cnpm版本，這個和npm的版本還是不一樣的

然後全域性安裝 vue-cli

cnpm install -g vue-cli

這個命令只需要執行一次就可以了。安裝上之後，以後就不用安裝了。

檢視vue版本號

vue -V    //注：V是大寫字母V

如果提示“無法識別 ‘vue’ ” ，有可能是 npm 版本過低，需要手動更新npm的版本號，這也是上面說的為什麼要保證npm版本號高的原因，npm的版本可以手動升級更新，沒記錯的話應該是

npm install -g npm

3、使用vue-cli來建立一個基於 webpack 模板的新專案

建立 
cmd利用cd指令進入到儲存專案的資料夾下，然後輸入命令

vue init webpack

如圖示記處輸入專案名稱（隨便命名，但不要是中文），其它的看自己需要自行考慮yes還是no，每項的介紹自行百度 

建立完成後資料夾內會有如下些檔案 

安裝專案所需要的依賴 
進入新建的專案資料夾下，就是上頭有一些檔案的裡面，輸入命令

cnpm install

因為自動構建過程中已存在package.json檔案，所以這裡直接安裝依賴就行。

執行專案

cnpm run dev

出現如圖畫面，在瀏覽器中輸入網址http://localhost:8080 會出現如下圖 

注意：如果瀏覽器開啟之後，沒有加載出頁面，有可能是本地的 8080 埠被佔用了（預設服務啟動的是本地的8080埠），可以通過修改一下配置檔案 config>index.js裡的埠號 

網上有的說執行cnpm run dev後，瀏覽器會自動預設開啟一個“歡迎頁面”，但是我的沒有，原因應該如下 
目錄中config下的index.js檔案中，將autoOpenBrowser的值是false，改為true就能自動打開了

4、後續其它步驟—打包上線

自己的專案檔案都需要放到 src 資料夾下

專案開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視

專案上線時，只需要將 dist 資料夾放到伺服器就行了。

附：部分檔案功能介紹（網上找的圖片） 

相關推薦