前言

Vue作為前端三大框架（Angular，React，Vue）之一，號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程式。具有開發快，雙向資料流等特點，有些人認為Vue是Angular和React的結合，既有Angular的模板語法也有React的元件化體系，以至於促使其發展飛快。
下面來就來講講Vue腳手架（vue-cli）的安裝吧。

安裝vue（使用npm 推薦）

# 全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
 

當使用npm install --global vue-cli命令時報：npm: command not found的解決辦法。

1、重灌nodejs。
2、依次執行下面的命令：

sudo apt-get remove npm
sudo apt-get remove nodejs-legacy
sudo apt-get remove nodejs 
sudo rm /usr/bin/node 
sudo apt-get install nodejs 
sudo apt-get install nodejs-legacy 
sudo apt-get install npm
 

執行上面命令的時候會出現：sudo: apt-get: command not found，原因是apt-get是debian(Ubuntu)才有的包管理器。

1、解決辦法一：使用brew代替apt-get
What is brew?
brew 全稱Homebrew，是Mac OSX上的軟體包管理工具，能在Mac中方便的安裝軟體或者解除安裝軟體。
如何安裝？
安裝只需要在終端下輸入下面一條命令（Mac自帶ruby不需要安裝）

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

安裝完成後使用brew install libxml2即可。如需檢視brew的更多功能請使用brew --help檢視其幫助文件。
2、解決辦法二：Fink 安裝過程這裡就不再闡述，有興趣的可以去看看，傳送門

brew安裝好之後就可以依次執行下面的命令：

brew remove npm
brew remove nodejs-legacy
brew remove nodejs
brew rm /usr/bin/node
brew install nodejs
brew install nodejs-legacy
brew install npm

繼續執行npm install --global vue-cli安裝架手架，發現npm不能安裝模組。原因是proxy的問題，要求node版本是node-6.2.1。

執行下面命令：

npm config rm proxy
npm config rm https-proxy

Mac中在/Users/YourUserName下找不到.bash_profile則自己建立.bash_profile檔案。執行下面命令：

cd /Users/YourUserName //進入檔案目錄位置
touch .bash_profile   //建立檔案
open －e .bash_profile //開啟並編輯（檔案可為空）
source .bash_profile  //編輯儲存了執行這句編譯下

上面步驟操作完了，再執行：npm install --global vue-cli，現在可以執行了。

當執行vue init webpack my-project時如果報：bash vue :command not found，這個提示是指沒有成功的安裝vue-cli，重新執行npm install --global vue-cli全域性安裝就可以了。

上面講的是用npm安裝，當然你也可以用yarn。想用yarn安裝，就必須用npm安裝一下yarn。執行命令：npm install -g yarn

修改全域性路徑為預設路徑：

npm root -g //檢視本機全域性的npm包的安裝路徑
npm config set prefix /usr/local //修改全域性路徑為預設路徑
npm -v //可以看到nodejs相應的版本號

建立新專案

cd /Users/app/Downloads/project
vue init webpack my-project(專案名字)  //建立新專案

//建立專案之前會詢問你專案相關資訊，資訊如下：

? Project name my-project    //設定專案名稱
? Project description my-project app  //設定專案描述
? Author Martyr    //設定作者
? Vue build standalone    //使用標準的檔案或是壓縮過的檔案（標準）
? Install vue-router? Yes    //是否安裝vue-router（路由）
? Use ESLint to lint your code? No    //是否使用語法檢查器（檢查十分嚴格）
? Pick an ESLint preset Standard    //用何種（選擇標準即可）
? Set up unit tests NO    //是否使用單元測試
? Setup e2e tests with Nightwatch? No    //是否使用e2e測試
? Should we run `npm install` for you after the project has been cre
ated? (recommended) npm    //是否需要現在通過npm或yarn幫你配置專案，或是稍後你自己動手安裝
安裝完成後出現執行專案的相關提示：
cd my-project    //進入my-project資料夾
npm install //安裝依賴；
npm run dev //執行專案

最後，瀏覽器位址列輸入：http://localhost:8080回車，新建的vue-cli模板專案就運行了。

附：
在專案裡安裝Vux移動端

npm install vux --save
npm install vux-loader --save-dev //安裝vux 必須安裝vux-loader 否則報錯

安裝weex開發APP

//全域性安裝 weex-toolkit 在app下執行就可以
sudo npm install -g weex-toolkit //安裝
appdeMacBook-Pro: app$ weex -v //檢視版本號，出現如下顯示則安裝成功
   v1.3.11
 - weex-builder : v0.4.0
 - weex-previewer : v1.5.1

相關資料

建立Vue專案 以及引入Iview
npm: command not found的解決方案
Mac OSX下使用apt-get命令
vue新建專案（-）vue-cli安裝
Mac 開啟、編輯 .bash_profile 檔案

原文地址：https://segmentfault.com/a/1190000016668756