VScode開發Vue初嘗試（一）

　　因爲公司近期有新的H5項目開發，而前端的同事也離職了，因此就臨時頂缸，研究學習一下Vue框架開發。

　　本人也是初學，在學習過程當中，把一些學習所得分享出來，可能會有不少問題和疏漏，但願你們可以多多指正，共同進步。

1、環境準備：

　　1. Node.js：在nodejs官網下載最新的安裝包，選擇安裝目錄，傻瓜式安裝。安裝完成後，打開dos命令，輸入node -v命令，會顯示安裝的nodejs版本，代表安裝成功。由於默認安裝nodejs時，會自動安裝npm，在dos命令窗口輸入npm -v命令，會顯示安裝的npm版本。

　　　　

　　2. VScode：直接選擇目錄，一鍵安裝便可；須要漢化的，在擴展中，搜索Chinese，找到中文簡體的插件安裝，而後重啓便可。

　　

 

2、環境安裝及配置：

　　1. 更改配置和緩存目錄

　　爲方便管理，且減輕系統盤壓力（默認會把配置和緩存放到我的文檔AppData下），將nodejs的node_global和node_cache轉移至nodejs安裝目錄下。在nodejs安裝目錄下，建立node_global和node_cache兩個文件夾，分別執行以下語句（XXXX指nodejs安裝目錄）

npm config set prefix "XXXX\node_global"
npm config set cache "XXXX\node_cache"

　　2. 安裝cmpn

　　npm的不少包在國外服務器，爲方便使用，因此優先使用淘寶的鏡像服務器對依賴包module進行安裝，所以首先安裝cnpm（國內鏡像包可能會有收錄延時，找不到最新的包，不過基本沒什麼影響），安裝命令以下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　

　　　　注意：cnpm安裝以後，不會自動添加環境變量配置，此時執行cnpm命令會提示「'cnpm' 不是內部或外部命令，也不是可運行的程序或批處理文件」；須要將nodejs的配置添加到環境變量PATH中（nodejs配置目錄就是第一步中的「XXXX\node_global」）；

　　3. 安裝vue-cli

　　vue-cli是一套用來搭建vue項目的腳手架，能極大程度的方便咱們建立一個全新的vue項目，只須要輸入幾個命令就能夠了

　　咱們能夠用npm命令很便捷的安裝vue-cli，固然前面咱們已經建立好了使用國內鏡像的cnpm，咱們也可使用cnpm來建立，命令以下：

npm install -g vue-cli    或    cnpm install -g vue-cli

　　

　　安裝完成以後，能夠輸入命令：vue -V，檢查是否安裝成功

　　

　　至此，咱們的前期工做已經所有完成了，接下來就可使用這些工具，幫咱們快速的完成vue建立及開發工做。

 

3、Vue項目搭建

　　1. 使用vue命令，快速建立vue項目

　　　　使用cd命令，定位到準備新建項目的目錄中，而後使用以下命令建立項目(XXX是項目文件夾名稱，會自動生成)

vue init webpack XXX

　　　　

　　　　說明： Project name：項目名稱，默認是上面命令建立的文件夾名稱，可修改（注意項目名稱必須所有小寫，不能有特殊符號，不然會提示error）

　　　　　　　Project description（項目說明）、Author（做者）、Vue build（Vue項目構建方式）：默認便可，直接回車下一步

　　　　　　　Install vue-router：是否安裝路由配置（默認Yes，可選否後續本身配置路由，我不會配置，因此就是默認Y）

　　　　　　　Use ESLint to lint your code：是否使用ESLint規範來進行編碼（建議No，ESLint編碼很嚴格，一個空格均可能報錯）

　　　　　　　Set up unit tests：是否設置單元測試（默認Yes，我不太懂，因此就默認了）

　　　　　　　Pick a test runner：選擇測試運行程序（默認jest，不懂，直接默認）

　　　　　　　Setup e2e tests with Nightwatch：是否我用e2e測試（默認Yes，不懂，直接默認）

　　　　　　　Should we run `npm install` for you after the project has been created? (recommended)：項目建立後是否直接運行npm install命令（雖然提示說是推薦，可是不建議，由於比較慢，後續咱們能夠直接使用 cnpm install 命令）

　　　　按照上述，項目就被建立好了，能夠在目錄下看到新建立的項目my_frist_vue

　　2.安裝項目依賴項，並運行項目

　　　　使用cnpm install 命令，直接安裝依賴項，安裝完成後，在項目目錄下，會出現一個node_modules依賴包文件夾

　　　　執行「cnpm run dev」命令，就會自動打包，生成項目，在瀏覽器中輸入「http://localhost:8080」查看

　　　　

　　　　

　　　　

4、VSCode集成開發Vue項目

　　1. 打開VSCode管理工具，選擇左上角「文件」-「打開文件夾」，彈框選擇剛剛建立的Vue項目文件夾，就會將項目加載到工做區，能夠很方便的查看和修改項目文件

　　2. 打開Vue文件時，會發現沒有任何顏色格式進行區分標註，須要安裝vetur插件，也是在擴展中直接搜索「vetur」進行安裝。

　　3. VSCode集成了終端命令工具，能夠直接在VSCode中進行依賴項注入、打包發佈等等操做，而不須要在dos命令中執行了。

　　　　VSCode左上角「查看」-「終端」，便可打開命令工具，自動定位到當前項目目錄中，因此無需再cd跳轉目錄。

 

5、總結：

　　暫時先寫到這裏，不是很擅長概括總結，寫的比較亂，等後續學有所成了，在來潤色潤色(*￣︶￣)

　　在此但願各位大佬多多指教、指正，不勝感激！