vue.js項目開發環境搭建
vue.js是近年來，最流行的前端js框架，記得我剛入行的時候，還是JQuery的天下，現在JQuery基本已經退出歷史的舞臺了，因爲ES6標準的完善和瀏覽器解析引擎的標準化，人們就不再需要JQuery了。技術與時俱進，估計多年之後，vue.js可能也會走向終結，那時估計又要開始學新的了。感慨一番後，言歸正傳，這篇主要是記錄一些 vue.js項目開發環境的初步搭建步驟。
文章目錄
1. node.js安裝
先從官網上下載長期支持版，官網地址：https://nodejs.org/zh-cn/，下載完成之後，點擊下一步傻瓜式安裝即可。之後輸入命令檢查版本號驗證安裝
node -v
npm -v
2. 配置npm
我們需要配置npm的全局模塊的存放路徑以及cache的路徑
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
3. 安裝國內源及CNPM
- 指定registry爲淘寶鏡像
npm config set registry https://registry.npm.taobao.org
- 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
此時需要在環境變量Path路徑後面加上D:\Program Files\nodejs\node_global，即cnpm腳本命令所在的文件夾目錄下。
設置系統變量，在系統變量下新建“NODE_PATH”，輸入“D:\Program Files\nodejs\node_global\node_modules”；
若沒有采用默認cache的環境配置：新增環境變量NODE_PATH和添加Path，兩個值都爲 C:\Program Files\nodejs\node_global
4. npm常用命令
-
使用npm安裝插件：命令提示符執行npm install [-g] [–save-dev]
-
使用npm卸載插件：npm uninstall [-g] [–save-dev]
注：不要直接刪除本地插件包 -
使用npm更新插件：npm update [-g] [–save-dev]
-
更新全部插件：npm update [–save-dev]
-
查看npm幫助：npm help
-
查看當前目錄已安裝插件：npm list
注：cnpm跟npm用法完全一致，只是在執行命令時將npm改爲cnpm。 -
解釋
- 爲Node插件名稱；
- [-g]：全局安裝；將會安裝在C:\Users\Administrator\AppData\Roaming\npm，並且寫入系統環境變量，若沒有采用默認cache的環境配置，此處將在node_global那個目錄下；
- 非全局安裝：將會安裝在當前定位目錄； 全局安裝可以通過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調用；
- –save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；
- -dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；
因爲node插件包相對來說非常龐大，所以不加入版本管理，將配置信息寫入package.json並將其加入版本管理，其他開發者對應下載即可，所以需保存至package.json中（命令提示符執行npm install，則會根據package.json下載所有需要的包）。
常用插件及其命令
- 刪除本地node_module的命令
安裝： npm install rimraf -g
執行： rimraf node_modules
- 自動重啓NodeJs後臺服務器的命令:
安裝：npm install -g nodemon
執行：nodemon server.js
這樣將nodejs開發服務器，服務器後端可以根據代碼的更改自動重啓Nodejs服務器，執行node server.js
5. yarn安裝與配置
yarn官方網站：https://classic.yarnpkg.com/zh-Hans/，官網下載安裝包後手動安裝，直接下一步下一步即可。安裝完成後，先用命令查看版本，確認安裝成功後，再配置淘寶源。
# 查看版本
yarn --version
# 配置淘寶源
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
常用命令
- yarn / yarn install 等同於npm install 批量安裝依賴
- yarn add xxx 等同於 npm install xxx —save 安裝指定包到指定位置
- yarn remove xxx 等同於 npm uninstall xxx —save 卸載指定包
- yarn add xxx —dev 等同於 npm install xxx —save-dev
- yarn upgrade 等同於 npm update 升級全部包
- yarn global add xxx 等同於 npm install xxx -g 全局安裝指定包
6. 安裝Chrome插件
-
離線安裝vue-devtools
先下載該插件，網址url：https://www.crx4chrome.com/crx/11903/，下載好 CRX 文件，將後綴名 .crx 修改爲 .zip，然後解壓到一個文件夾中。進入 Chrome 擴展程序管理頁面(選項 - 更多工具 - 擴展程序)。打開 “開發者模式” -> 加載已解壓的擴展程序 -> 選擇剛纔解壓的文件夾，完成。當然，最方便安全的還是通過Chrome應用商店直接在線安裝。無法在線安裝的通過離線安裝倒也方便。使用老版本 Chrome 的用戶還可以試下直接將 crx 文件拖進去直接安裝，新版本已經不支持這一方式了。 -
離線安裝 JSONView
Chrome上其實有很多查看JSON數據的插件，但是經過測試，此款插件的展示效果非常好，除了放大、縮小、摺疊之外，沒有其他多餘功能，簡單易用。
7. VSCode 插件安裝
用VSCode作爲開發用的IDE，需要安裝如下插件
- Chinese （Simplified） Language Pack for Visual Studio Code
- vscode-icons
- ESLint
- Vetur
- Beautify
- Markdown Preview Enhanced
- One Dark Pro
- Solarized-light Theme
- EditorConfig for VS Code
8. 通過CLI構建應用
版本不同，結構和命令也不同，具體參考官方文檔：https://cli.vuejs.org/zh/guide/
8.1 CLI 2.x版本
cnpm install -g vue-cli
vue --version
vue -V
vue init webpack vuejslearn
之後一路回車，選個包管理工具yarn或者npm
安裝完成後，輸入如下命令，安裝運行即可。
cd vuehslearn
npm install
npm run dev
只要在瀏覽器地址欄中輸入 http://localhost:8080 即可
8.2 CLI 3.x版本
# 安裝 `cnpm`
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安裝 `vue-cli`
cnpm install -g @vue/cli
# 安裝 `webpack`
cnpm install -g webpack
# 命令創建項目
vue create HelloWorld
# 圖形化創建項目
vue ui
創建項目過程，新建一個VueDemo文件夾，單擊“在此創建新項目”按鈕，首先配置“詳情”界面，給項目起一個名字，如HelloWorld；然後在“包管理器”中選擇npm，有經驗的用戶也可以選擇yarn；最後，選擇“初始化git倉庫（建議）”。如果代碼只用在本地使用，就不用選擇這一項。
接下來配置預設“界面”，因爲默認配置無法進行自定義修改，我們這裏不使用默認配置。然後到“功能”界面選擇需要的包，選擇2個默認的包——Babel和Linter/Formatter, Babel用來轉譯ES6語法，Linter/Formatter用來規範代碼格式。選擇默認包的操作跟默認配置不一樣，默認配置不可以使用配置項來修改ESlint的規則。使用手動預設可以在配置裏選擇ESlint中的Airbnb規則，這是ESlint中最嚴格的規則，可以最大化地規範代碼格式。
單擊“創建”按鈕的時候，系統會提示是否保存預設，可以保存，也可以不保存，之後就是等待項目的創建與依賴的安裝，安裝完成後，此時在命令行工具中進入項目文件夾，啓動項目。
npm run serve
- 用VsCode打開運行
