Vue.js開發環境搭建說明（mac）
vue開發環境搭建（mac）
投影放大：
cmd++
安裝Node
下載Node
官網下載 https://nodejs.org/en/download/
安裝Node
雙擊安裝包，選擇安裝目錄，比如： /usr/local/bin
安裝成功後最好記錄一下安裝目錄
• Node.js v10.13.0 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm
測試Node安裝
測試是否安裝成功。
開啟終端，輸入node，出現>互動命令列，然後可以輸入console.log("Hello,World");測試安裝。
返回Hello,World和undefined表示成功。
> console.log("Hello,World");
Hello,World
undefined
輸入.exit退出node，檢視node和npm的版本。
node -v
npm -v
設定npm的預設安裝路徑和快取路徑
# 檢視使用者配置
npm config ls
npm config list
# 檢視全部配置
npm config ls -l
npm config list -l
預設npm包安裝目錄為prefix = "/usr/local"，因為安裝時有可能出現許可權不夠無法安裝。
-
修改npm安裝程式時的預設位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"
-
設定npm安裝程式時的快取位置 npm config set cache "/xxx/xx" 快取的預設位置為cache = "/Users/danni/.npm"，在使用者下，不存在許可權問題，因此也可以不修改。
-
然後在把"/Users/danni/.nodejs"路徑新增到環境變數PATH中
cd vi .bash_profile export NODE_HOME="/Users/danni/.nodejs" export PATH=":$NODE_HOME/bin:$CNPM_HOME/bin:$M2_HOME/bin:$PATH"
安裝cnpm
預設的npm包下載地址為registry = "registry https://registry.npmjs.org"，在國外，速度較慢，可以用阿里定製的cnpm命令列工具代替預設的npm。
# 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
# 修改配置為cnpm
npm config set registry http://registry.cnpmjs.org
# 復原
#npm config set registry https://registry.npmjs.org
可檢視配置是否已修改
npm config ls
使用者的配置會儲存在/Users/danni/.npmrc檔案中
安裝vue-cli
安裝vue和vuex
cnpm install vue
cnpm install vuex
安裝vue-cli腳手架
cnpm install vue-cli -g
配置環境變數
剛才已配置export NODE_HOME="/Users/danni/.nodejs"，確認/Users/danni/.nodejs/bin下有vue等執行檔案即可。
DannideMacBook-Pro:bin danni$ ls
cnpm vue vue-init vue-list
檢視版本
vue -V
注意：V為大寫；此為vue-cli版本，非vue版本。
安裝IDE(如：VSCode or WebStorm)
官網下載
注：webstorm沒有社群版，需購買，目前如個人有開源軟體，可向JetBrains申請一年的License，一年後再續期。
匯入工程專案
把vue_web專案匯入IDE
開啟VSCode/webstorm，File - Open開啟即可。
安裝專案
在專案所在目錄下執行命令，生成node_modules目錄。
cnpm install
執行專案
方法一：
- 在專案所在目錄下執行命令。
cnpm run dev- 控制檯輸出訪問地址，比如：http://localhost:8081
方法二：
- webstorm中配置Run - Edit Configurations - Add new configuration
- 選擇npm，package-.json選擇專案中的package.json，script填寫dev
- 然後點選Run
訪問測試
- 根據控制檯輸入地址訪問
- 如：http://localhost:8081
打包專案
npm run build
打包後生成dist目錄。
注意：提交程式碼時，不要上傳node-modules、dist資料夾目錄下的內容
常用包安裝
可先安裝，防止後續使用時缺少。如：
- 單元測試mocha：
cnpm install -g mocha - express框架：
cnpm install -g express