使用終端安裝Vue運行環境
1、安裝 Homebrew
Homebrew 是osx下面最優秀的包管理工具,沒有之一。先在終端查看是否已安裝brew
brew -v
如果返回 Homebrew 的版本號 例如:Homebrew 1.3.6
那么恭喜你,可以跳過這一步,如果沒有,那就乖乖執行第一步。
/usr/bin/ruby -e
"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安裝 node.js
為了避免使用brew命令經常出錯的情況,所以采用手動安裝
下載地址:https://nodejs.org/en/download/ (選擇mac os)
確認node是否安裝成功。
node -v
3、 獲取nodejs模塊安裝目錄訪問權限 (必須執行)
sudo chmod -R 777 /usr/local/lib/node_modules/
4、安裝 淘寶鏡像 (cnpm)
ps: Node 的模塊管理器 npm 會一起安裝好,不需要另外安裝,查看npm的版本
npm -v
如果版本太低,小於4.0,請執行下面命令升級(vue-cli需要npm版本大於4.0)
npm install -g npm
Node 的官方模塊倉庫網速太慢,用下面的命令替代上面的
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、安裝webpack
sudo cnpm install webpack -g
這里需要注意一點使用上面語法,執行npm run dev 報錯! MAC電腦出現 .bin/webpack-dev-server permission denied 提示權限問題,為了避免出現這個問題可以采取下面語法:
sudo cnpm install webpack-dev-server -g
6、安裝vue腳手架 vue-cli
選擇全局安裝(npm下載速度超級慢,目前cnpm已經成功替代npm)
sudo cnpm install -g vue-cli
安裝成功后,vue命令查看
使用vue list查看vue的模板
7、在硬盤上找一個文件夾放工程用的,在終端中進入該目錄
cd 目錄路徑
8、創建一個vue.js工程(項目)
vue init webpack(使用哪個模板?可以百度查看) 項目名稱 (項目名稱不能用中文)
過程中需要填寫一些信息,項目名稱、項目描述、是否需要安裝vue-router、是否使用ESLint即新的js語法標准,檢測你的代碼。由於只是測試項目,unit test單元測試和ese tests 在這里都選了no
9、安裝項目依賴
一定要從官方倉庫安裝,npm 服務器在國外所以這一步安裝速度會很慢。
npm install (會非常慢)
cnpm install
進入項目,查看當前目錄結構
node_modules是安裝依賴成功后新增的一個目錄
10、安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource
cnpm install vue-router vue-resource --save
11、啟動項目
npm run dev
或
cnpm run dev
項目啟動成功后,命令行會給出在瀏覽器中查看項目效果的地址
ep: > Listening at http://localhost:8080 (或其它端口)