vue從棄坑到抗戰——動手搭建本地環境

常言道：人在江湖，身不禁己。

公司決定用vue作先後端分離項目，定睛一想：確也是當今走向。。。

1.安裝Node.js

https://nodejs.org/zh-cn/

初次安裝node，需配置環境變量（此處略，不會問度娘吧），之後更新node版本就不用再配置了

配置好環境變量，在cmd裏輸入：node -v，可查看當前node版本

能看到版本號，就說明配置成功了

2.基於node.js，安裝npm

在cmd裏輸入：npm install

這裏不建議安裝淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org

誠然淘寶鏡像會提高後續安裝依賴的速度，但也有可能報莫名其妙的錯誤（我的練習項目就無所謂啦）

所以若是無線安裝速度過慢，建議插網線。

同理，npm -v 查看當前npm版本：

3.全局安裝webpack

npm install -g webpack（若是安裝了淘寶鏡像，則可將npm替換爲cnpm，後續同理）

此處的 -g 是 -global 的縮寫，表明全局安裝，後續同理

install 也能夠縮寫爲 i （即 npm i -g webpack）

4.全局安裝 vue-cli 腳手架

若是說練習vue語法尚可不用腳手架，但在項目中不管如何都逃不開的

npm install -g vue-cli

5.建立vue項目（終於能夠建立項目啦！）

步驟：

① 打開你但願項目在何處建立的目錄 

② 按住shift，鼠標右鍵在此處vue init webpack vue_test（項目文件夾名）

     以下圖，確保在你但願的目錄下建立項目（熟悉命令行語法也可用cd:進入目錄）

③ 接下來是一些確認項，好比項目名稱，做者名稱，等等

    除了Eslint，都建議一路回車

ESLint 保證語法正確、風格統一，其規範相較傳統JS嚴格許多。若是不熟悉其規範，極可能滿篇爆紅讓你崩潰。建議新手在Eslint打n

    「Should we run `npm install` for you after the project has been created?」
        ——安裝新項目最後會有這樣1句話，意思是安裝項目所須要的npm依賴，一樣回車選擇yes
        ——線上拉取他人項目時，須要在該項目目錄裏npm install

④ 一路回車後，在剛纔選擇的文件夾自動生成項目目錄

項目目錄裏。絕大多數狀況項目出現問題時，刪掉該目錄並從新npm install便可

⑤ 進入項目目錄（test），npm run dev

DONE即表示運行成功，複製地址到在本地瀏覽器便可

        絕大多數報錯會在該界面顯示，而且沒法在瀏覽器運行項目

        （若是是Eslint報的錯，則不影響在瀏覽器運行）

Welcome to Vue! ——vue項目搭建至此成功！

任何問題和項目相關，歡迎留言&交流！