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"，由於安裝時有可能出現權限不夠沒法安裝。

1. 修改npm安裝程序時的默認位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"

2. 設置npm安裝程序時的緩存位置 ​npm config set cache "/xxx/xx" 緩存的默認位置爲cache = "/Users/danni/.npm"，在用戶下，不存在權限問題，所以也能夠不修改。

3. 而後在把"/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)

官網下載

• https://code.visualstudio.com
• https://www.jetbrains.com/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
• 等等