前言
博主本身是一直從事Java后端開發(fā)绽媒，一直想獨立開發(fā)一套完整前端和后端技術(shù)結(jié)合的項目來提升自己的技術(shù)水平攒读，經(jīng)過對業(yè)界的一些熱點技術(shù)的了解并對技術(shù)棧選型考慮后恢暖，博主打算利用Vue.js和Spring Boot技術(shù)棧來開發(fā)一個屬于自己的博客系統(tǒng)怖竭，等開發(fā)完成把自己平時遇到的技術(shù)分享出來可岂。由于對前端技術(shù)不是太了解，所以想從零開始把開發(fā)的整個過程記錄下來践樱，第一篇文章就先把前端環(huán)境搭建起來再弄后面的厂画。
安裝node.js
進(jìn)入Node.js官網(wǎng)：https://nodejs.org/en/，選擇下載并安裝Node.js拷邢。
2.驗證Node.js是否安裝好袱院，在windows下，win+r召喚出運(yùn)行窗口瞭稼，輸入cmd打開命令行窗口忽洛。輸入node -v即可得到對應(yīng)的Node.js版本。
npm包管理器是集成在Node.js中了环肘，所以在安裝Node.js的時候就已經(jīng)自帶了npm欲虚，輸入npm -v可得到npm的版本。
輸入以下命令npm -g install npm悔雹，更新npm至最新版本复哆。
安裝cnpm
執(zhí)行命令?npm install -g cnpm --registry=https://registry.npm.taobao.org?,使用npm的國內(nèi)鏡像（npm 國內(nèi)鏡像?https://npm.taobao.org/）cnpm 命令代替默認(rèn)的npm命令欣喧，增加依賴包加載速度且避免資源限制。
cnpm安裝腳手架vue-cli
在命令行中運(yùn)行命令?cnpm install -g vue-cli?安裝腳手架梯找。
構(gòu)建項目
將vue項目建在F盤的vue-workspace文件夾下唆阿，利用命令進(jìn)入此目錄。
在cmd中輸入盤符F:回車即可進(jìn)入F盤锈锤，
然后執(zhí)行命令進(jìn)入F:workspacesvue-workspace路徑目錄下驯鳖，
再輸入新建項目命令?vue init webpack javalsj-vue，執(zhí)行后會自動生成vue項目牙咏。
安裝項目依賴
上面腳手架自動生成的vue項目不能直接運(yùn)行臼隔，需要加載上項目需要的依賴包才能運(yùn)行。通過在cmd中使用命令先定位到項目所在路徑目錄下F:workspacesvue-workspacejavalsj-vue妄壶，然后輸入命令?cnpm install?安裝項目所需的依賴包資源摔握。
（博主在下載第三方開源項目運(yùn)行的時候，有時會遇到奇怪的報錯丁寄，然后通過先執(zhí)行cnpm rebuild node-sass氨淌，后執(zhí)行cnpm install解決，此步驟不是必須的伊磺。）
運(yùn)行項目
項目準(zhǔn)備完畢后盛正，現(xiàn)在可以運(yùn)行vue初始項目看效果了。
在cmd中屑埋，注意需要使用命令先定位到F:workspacesvue-workspacejavalsj-vue目錄下豪筝，然后再輸入命令npm run dev?來運(yùn)行項目。
瀏覽器訪問項目
項目運(yùn)行成功后瀏覽器訪問地址?http://localhost:8080 就可以查看效果啦摘能。
備注
經(jīng)過以上步驟完成了搭建vue的腳手架項目续崖，可以簡單看下項目目錄，后續(xù)我們開發(fā)項目的時候只需在src目錄下進(jìn)行团搞。
工欲善其事必先利其器严望，博主在開發(fā)Vue項目時，選擇前端開發(fā)工具時試了Sublime Text工具感覺不好用逻恐。然后問了一些朋友像吻，經(jīng)過嘗試對比后最后還是選擇了Webstom（收費(fèi)）、Visual Studio Code（免費(fèi)）工具作為前端開發(fā)工具复隆，真心好用拨匆，開發(fā)工具下載官網(wǎng)地址：https://code.visualstudio.com/。
