概要介紹
首先，了解一下，Vue 的整體開發(fā)環(huán)境。
-
Homebrew：Mac 系統(tǒng)下的包管理器，類似于 Linux 下的 apt-get，Windows 的控制面板 - 安裝刪除程序 -
Node.js： JavaScript 運(yùn)行環(huán)境（runtime），不同系統(tǒng)之間不能直接運(yùn)行各種編程語言，Runtime類似于各國會議上的同聲傳譯 -
npm： Nodejs 下的包管理器，類似于 Mac 下的 Homebrew -
webpack： Vue的組件都是通過 .vue 或者像微信小程序的.wxml 和.wcss 等自定義的，組件都無法被用戶通過各種瀏覽器解析，需要被翻譯打包成 js文件 -
vue-cli： 用來生成模版的 Vue 工程，相當(dāng)于按照設(shè)計(jì)好的圖紙來蓋房子
使用終端安裝Vue運(yùn)行環(huán)境
1、安裝 Homebrew
Homebrew是osx下面最優(yōu)秀的包管理工具,沒有之一。先在終端查看是否已安裝brew
brew -v
如果返回 Homebrew 的版本號 例如：Homebrew 1.3.6 那么恭喜你，可以跳過這一步，如果沒有，則執(zhí)行第一步。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安裝 node.js
附加：切換node版本可參該文章：（node版本不一致會導(dǎo)致依賴包不同）
brew install nodejs
如果為了避免使用brew命令經(jīng)常出錯(cuò)的情況，可以采用手動安裝
下載地址：https://nodejs.org/en/download/ （選擇mac os）
驗(yàn)證：
由于node安裝的時(shí)候就自帶npm了。如果出現(xiàn)版本信息，就說明安裝成功了。
node -v #查看node版本
npm -v #查看npm版本
3、 獲取nodejs模塊安裝目錄訪問權(quán)限 （必須執(zhí)行）
sudo chmod -R 777 /usr/local/lib/node_modules/
然后輸入用戶密碼即可（由于是sudo）
4、安裝 淘寶鏡像 （cnpm）
使用sudo目的是npm安裝在了/usr/local/lib下，沒有對應(yīng)的操作權(quán)限
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、安裝webpack
sudo cnpm install webpack -g
注意：使用上面語法執(zhí)行npm run dev 可能報(bào)錯(cuò)!
解決方法：MAC電腦出現(xiàn) .bin/webpack-dev-server permission denied 提示權(quán)限問題,為了避免出現(xiàn)這個(gè)問題你可以采取下面語法
sudo cnpm install webpack-dev-server -g
6、安裝vue腳手架
npm下載速度比較慢，目前cnpm已經(jīng)成功替代npm
sudo cnpm install -g vue-cli
以上基本的安裝完成
可以使用下面命令進(jìn)行查看結(jié)果：
vue list
7、安裝項(xiàng)目依賴
首先，如果已經(jīng)有vue項(xiàng)目，則進(jìn)入項(xiàng)目根目錄 ，安裝項(xiàng)目依賴
cnpm install
如果沒有Vue項(xiàng)目，則可參考這篇文章下載vue項(xiàng)目：文章來源：http://www.zghlxwxcb.cn/news/detail-752776.html
8、安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請求模塊vue-resource
cnpm install vue-router vue-resource --save
9、啟動項(xiàng)目
npm run dev
或
cnpm run dev
cnpm run dev 后面的dev在項(xiàng)目中表示的是dev環(huán)境，是在package.json文件里面，scripts字段定義的對象腳本，當(dāng)然了，還可以有其他的環(huán)境，不同的環(huán)境對應(yīng)的配置不同，在各境上運(yùn)行只需要執(zhí)行對應(yīng)的命令即可。（可能有的是cnmp run sever，根據(jù)自己項(xiàng)目的配置啟動即可）文章來源地址http://www.zghlxwxcb.cn/news/detail-752776.html
到了這里，關(guān)于【Vue篇】mac上Vue 開發(fā)環(huán)境搭建、運(yùn)行Vue項(xiàng)目（保姆級）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
