https://blog.csdn.net/inthuixiang/article/details/82225407
1、 安裝nodejs環境
官網下載：https://nodejs.org/en/download/
一直默認就行，路徑可以改變但要記得到
安裝完成后cmd，輸入
node -v
1
npm -v
1
如果能看到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
1
安裝完成，輸入
cnpm -v
1
可以查看當前cnpm版本，這個和npm的版本還是不一樣的
然后全局安裝 vue-cli
cnpm install -g vue-cli
1
這個命令只需要運行一次就可以了。安裝上之后，以后就不用安裝了。
查看vue版本號
vue -V //注：V是大寫字母V
1
如果提示“無法識別 ‘vue’ ” ，有可能是 npm 版本過低，需要手動更新npm的版本號，這也是上面說的為什么要保證npm版本號高的原因，npm的版本可以手動升級更新，沒記錯的話應該是
npm install -g npm
1
3、使用vue-cli來創建一個基於 webpack 模板的新項目
創建
cmd利用cd指令進入到保存項目的文件夾下，然后輸入命令
vue init webpack
1
如圖標記處輸入項目名稱（隨便命名，但不要是中文），其它的看自己需要自行考慮yes還是no，每項的介紹自行百度
也可以直接把項目名寫在命令后面
創建完成后文件夾內會有如下些文件
安裝項目所需要的依賴
進入新建的項目文件夾下，就是上頭有一些文件的里面，輸入命令
cnpm install
1
因為自動構建過程中已存在package.json文件，所以這里直接安裝依賴就行。
運行項目
cnpm run dev
1
退出，Ctrl + c >> y >> 回車
出現如圖畫面，在瀏覽器中輸入網址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
1
打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看
項目上線時，只需要將 dist 文件夾放到服務器就行了。
附：部分文件功能介紹（網上找的圖片）
————————————————
版權聲明：本文為CSDN博主「kivet.whx」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/inthuixiang/article/details/82225407