本來以為在Mac上搭建vue.js的環境挺簡單的，誰知遇到各種問題（可能是RP問題），網上解決的方法也寥寥無幾，這裡就記錄下遇到的坑。

一、vue.js開發環境

1、安裝 brew，這個簡單，直接執行遠端指令碼

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、安裝 nodejs，這一步時間可能略長（執行時間長短也有可能跟網路有關係）

brew install nodejs

3、獲取nodejs模組安裝目錄訪問許可權

sudo chmod -R 777 /usr/local/lib/node_modules/
 

4、安裝淘寶映象，國內直接使用 npm 的官方映象是非常慢的，所以這裡使用淘寶 NPM 映象

1）更改npm源：

npm config set registry https://registry.npm.taobao.org

npm config get registry

（3）然後安裝淘寶的cnpm（如果該步驟報錯“rollbackFailedOptional”，可以嘗試執行步驟4或步驟5，否則跳過步驟4或步驟5）

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

（4）先刪除原有的所有代理，再重新安裝淘寶的cnpm

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

（5）報錯“rollbackFailedOptional”，還可能是許可權問題，用sudo執行：

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

以下是安裝淘寶cnpm成功的結果：

MacBook-Pro:~ hu$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated 
 
[email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ [email protected]
added 632 packages from 843 contributors in 22.264s

5、用淘寶的cnpm安裝vue

cnpm install vue
cnpm install --global vue-cli

到這裡vue.js環境就算ok了。

二、初始化一個vue.js專案

1、自己建立並進入一個專案目錄，建立一個名為VueDemo的vue專案

cd /usr/local/projects/vue/
vue init webpack VueDemo

建立專案可能會報錯“vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=Parse Error”，可以嘗試如下：
（1）清空npm代理，重新執行

npm config set proxy null
vue init webpack VueDemo

（2）或者sudo執行（webpack是構建工具，也就是整個專案是基於webpack的）

sudo vue init webpack VueDemo

建立專案成功的結果：

? Project name VueDemo
? Project description A Vue.js project
? Author danny <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "VueDemo".

# Project initialization finished!
# ========================

To get started:

  cd vue-demo-01
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2、啟動專案
（1）安裝專案依賴，啟動專案需要先安裝專案所需依賴，就跟java的maven專案需要先更新dependencies一樣，具體專案都依賴了什麼，在專案根目錄下package.json中的devDependencies標籤下可以看到

cd /usr/local/projects/vue/VueDemo
sudo cnpm install

在Mac下，有些專案執行install時可能會報錯“libtool: unrecognized option `-static’”，解決方法：在~/.bash_profile中新增“PATH="/Library/Developer/CommandLineTools/usr/bin:$PATH”，再重新開啟一個終端，重新執行install命令。

安裝成功之後，專案根目錄會多出一個node_modules資料夾，這裡邊就是專案需要的依賴包資源（檔案挺多的）。

（2）執行專案，用熱載入的方式啟動專案，在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。

cnpm run dev

啟動成功的結果：

> [email protected] dev /usr/local/projects/vue/VueDemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3084ms                                                                                                                                   下午10:58:20

 I  Your application is running here: http://localhost:8080

開啟http://localhost:8080就是vue預設的模板

三、vue.js專案打包部署

當vue.js專案開發完成需要部署時，先打包，再部署。
1、打包
在專案目錄下，執行

cnpm run build

執行完之後，專案根目錄會出現一個dist資料夾，裡面有一個index.html，直接開啟就可以看到頁面效果。

2、部署
上面步驟，dist就是打好的包，可以直接把dist部署在nginx等伺服器下，以nginx為例，把nginx.conf中的location指向dist資料夾，就可以了。

server {
        listen  80;
        server_name  127.0.0.1;
        location / {
            root /data/delploy/dist/;
            index  index.html index.htm;
        }
}