Spring Boot+Vue從零開始搭建系統（一）：項目前端_Vuejs環境搭建

前言

博主自己是一直從事Java後端開發，一直想獨立開發一套完整前端和後端技術結合的項目來提高本身的技術水平，通過對業界的一些熱點技術的瞭解並對技術棧選型考慮後，博主打算利用Vue.js和Spring Boot技術棧來開發一個屬於本身的博客系統，等開發完成把本身平時遇到的技術分享出來。因爲對前端技術不是太瞭解，因此想從零開始把開發的整個過程記錄下來，第一篇文章就先把前端環境搭建起來再弄後面的。

---

安裝node.js

1. 進入Node.js官網：https://nodejs.org/en/，選擇下載並安裝Node.js。

2.驗證Node.js是否安裝好，在windows下，win+r召喚出運行窗口，輸入cmd打開命令行窗口。輸入node -v便可獲得對應的Node.js版本。

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

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

---

安裝cnpm

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

---

cnpm安裝腳手架vue-cli

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

---

構建項目

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

---

安裝項目依賴

上面腳手架自動生成的vue項目不能直接運行，須要加載上項目須要的依賴包才能運行。經過在cmd中使用命令先定位到項目所在路徑目錄下F:workspacesvue-workspacejavalsj-vue，而後輸入命令 cnpm install 安裝項目所需的依賴包資源。
（博主在下載第三方開源項目運行的時候，有時會遇到奇怪的報錯，而後經過先執行cnpm rebuild node-sass，後執行cnpm install解決，此步驟不是必須的。）

---

運行項目

項目準備完畢後，如今能夠運行vue初始項目看效果了。
在cmd中，注意須要使用命令先定位到F:workspacesvue-workspacejavalsj-vue目錄下，而後再輸入命令npm run dev 來運行項目。

---

瀏覽器訪問項目

項目運行成功後瀏覽器訪問地址 http://localhost:8080 就能夠查看效果啦。

---

備註

通過以上步驟完成了搭建vue的腳手架項目，能夠簡單看下項目目錄，後續咱們開發項目的時候只需在src目錄下進行。

工欲善其事必先利其器，博主在開發Vue項目時，選擇前端開發工具時試了Sublime Text工具感受很差用。而後問了一些朋友，通過嘗試對比後最後仍是選擇了Webstom（收費）、Visual Studio Code（免費）工具做爲前端開發工具，真心好用，開發工具下載官網地址：https://code.visualstudio.com/。