Mac安裝vue.js開發環境
- 一、vue.js開發環境
- 二、初始化一個vue.js項目
- 三、vue.js項目打包部署
本來以為在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
（2）配置后可通過下面方式來驗證是否成功，如果顯示“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 socks@1.1.10: 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
+ cnpm@6.0.0
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 <danny@gmail.com>
? 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
啟動成功的結果：
> vue-demo-01@1.0.0 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默認的模板
對於用慣了idea的同學可能想在idea中開發vue，idea配置vue開發環境網上有很多教程，這里就不重復了，隨便貼一篇：https://www.cnblogs.com/phpdragon/p/7216994.html。
三、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;
}
}
安裝brew
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
如果報錯就切換到指定的文件夾下進行操作
# 報錯信息
curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection
報錯版本不一致：
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
# 使用
sudo+npm uninstall -g vue-cli
sudo + npm install -g @vue/cli
分別執行