（一）SpringBoot + Vue 前後端分離項目之前端項目

先看效果，能運行到此界面說明前端項目是成功的：

開始搭建：

1.安裝Node.js:

• 進入Node.js官網:https://nodejs.org/en/,選擇下載並安裝Node.js。安裝的具體步驟就省略啦，基本上就是一直下一步。
• 驗證Node.js是否安裝好,在windows下,win r召喚出運行窗口,輸入cmd打開命令行窗口。輸入node -v即可得到對應的        Node.js版本。

npm包管理器是集成在Node.js中了,所以在安裝Node.js的時候就已經自帶了npm,輸入npm -v可得到npm的版本。

輸入以下命令npm -g install npm,更新npm至最新版本。 

2.安裝cnpm

執行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ,使用npm的國內鏡像 （npm 國內鏡像 https://npm.taobao.org/）cnpm 命令代替默認的npm命令，增加依賴包加載速度 且避免資源限制。 

 

3.cnpm安裝腳手架vue-cli

在命令行中運行命令 cnpm install -g vue-cli 安裝腳手架。

4.構建項目

將vue項目建在D盤的vue-workspace文件夾下，利用命令進入此目錄。 在cmd中輸入盤符D:回車即可進入D盤， 然後執行命令進入D:\workspace路徑目錄下， 再輸入新建項目命令 vue init webpack java-vue，執行後會自動生成vue項目。

 

5.運行項目

注意，此時你所在的路徑並沒有在你生成的項目中 。切換路徑至你生成的項目中cd java-vue ，然後再輸入命令npm run dev 來運行項目。

PS:也可以修改端口，D:\workspace\java-vue\config\index.js 找到port進行修改

至此，前端vue項目已經構建並啓動成功了。

6.建議使用工具Visual Studio Code

這個就看個人喜好了，我感覺這個還蠻好用的，開發工具下載官網地址:https://code.visualstudio.com/。

具體安裝步驟就不詳細介紹了，也基本就是下一步 下一步 完成...

打開項目的文件夾就好了，也可以在工具裏面運行，

在Terminer中回車就可以輸入num run dev 

不過可能會出一點小問題，沒有則忽略。

解決報錯：
（1）以管理員身份運行vs code

（2）在終端執行：get-ExecutionPolicy，顯示Restricted（表示狀態是禁止的）

（3）在終端執行：set-ExecutionPolicy RemoteSigned

（4）在終端執行：get-ExecutionPolicy，顯示RemoteSigned

再進行num run dev 就不報錯了。