vue 安裝 環境搭建

需先安裝node，在根目錄安裝，若是windows就安裝c盤。安裝完node會自帶npm，npm -v檢測

node下載地址：http://nodejs.cn/download/

mac安裝需要獲取root權限，輸入 sudo -s 會提示輸入密碼，完成即可安裝

提示權限不足是需要加sudo

安裝webpack  -g 表示全局安裝

npm install webpack -g

確認NPM和的Webpack是否安裝。

// 檢測 node   
node -v  
// 檢測 npm  
npm -v  
// 檢測 webpack  
webpack -v  

出現版本號爲已安裝。

安裝VUE的幾種方法：

 

// 全局安裝  
npm install -g vue-cli  
// 淘寶鏡像安裝  
npm install -g cnpm --registry=https://registry.npm.taobao.org/  
// 安裝完成後檢測是否安裝成功  
vue -V 

創建項目

選擇要放項目的文件夾

// 自定義項目  
vue init webpack demo

圖片用的是之前Windows版本，提示信息都一樣

項目安裝完成，進入自己創建的項目文件夾

// 安裝依賴  
cnpm install
// 啓動項目  
npm run dev 

如果端口衝突可在配置裏index.js下修改

autoOpenBrowser: true, //自動打開瀏覽器

配置完成，瀏覽器會自行啓動，實時刷新頁面。

按需安裝各種組件

// 安裝路由  
cnpm install vue-router  
// 安裝sass  
cnpm install sass-loader  
// 安裝node sass  
npm install node-sass  
// 安裝echarts  
cnpm install echarts --save
// 安裝驗證組件  
cnpm install vee-validate  
// 安裝style-loader  
npm install stylus-loader css-loader style-loader --save-dev    
// 如果stylus安裝失敗可單獨安裝  
npm install stylus  
//如使用$api superagent安裝： 
cnpm install superagent -D
//安裝iview
npm install iview --save
// 安裝resource接口請求工具
npm install vue-resource --save-dev
//安裝vuex
npm install vuex --save
//通過require的方式來引入css，首先需要安裝css-loader，如果需要在js中，require，.less文件，那麼我們需要增加包less-loader和less包
npm install font-awesome-webpack less less-loader css-loader style-loader file-loader font-awesome
// 一個自定義滾動插件
npm install vue-seamless-scroll --save

打包

// 項目打包  ctrl+c 終止項目  
npm run build