使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端項目框架

1、本文將分享如何快速搭起基於webpack+vue的前端項目框架，利用vue的本身的腳手架工具vue-cli搭建起基本的環境配置，再經過npm包管理工具引入相應的依賴來完善項目的各類依賴框架。下面是具體實操。

2、基本命令操做。

1.在開發以前須要首先安裝node.js，直接百度搜索或者在其中文官網也能夠下載http://nodejs.cn/download/，

在裝完node以後npm包管理工具也自動的安裝好，安裝完以後，在命令行輸入node -v或者npm -v，出現版本號說明安裝成功。以下圖所示：

2.在使用npm以前，最好把鏡像換成淘寶的,長久使用，跑一下命令：npm config set registry https://registry.npm.taobao.org，

替換成功後跑npm config get registry命令顯示淘寶鏡像路徑的話就表明替換成功。

3.第二步全局安裝vue-cli，在命令窗口輸入npm install -g vue-cli，而後跑vue -V出現版本號證實安裝成功。

4.開始生成項目，在本地硬盤找一個目錄存放代碼，而後打開命令行cd切換到相應的路徑下，而後跑 vue init webpack Vue-Project（項目名稱）

vue init webpack Vue-Project（項目名稱）

5.輸入cd Vue-Project  而後安裝依賴npm install, 若是日常時開發就跑npm run dev(本地開發跑代碼)，若是須要打包則跑npm run build。

6.項目默認監聽的是80端口，容易跟其餘應用引發端口衝突，因此在項目下打開config文件夾，打開index.js，把端口改成8888，這樣就避免衝突了，

7.最後從新跑指令npm run dev   ,而後再地址欄輸入http://localhost:8888,就會出現相應的頁面。

3、添加相應的框架以及依賴

1.引入sass預編譯工具加快編碼速度，跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,若是node-sass比較難裝的話能夠換成cnpm來下載依賴，具體可百度下作法。

操做：

在components目錄下新建一個header的目錄，新建兩個文件header.vue  header.scss，而後引入到app.vue中使用，由於vue講的是模塊化開發，因此我喜歡把樣式跟組件放到一個文件夾裏跟其餘模塊區分，

App.vue:

header.scss:

這樣就證實sass 是安裝成功了。

 2.引入axios接口請求框架，跑命令npm install axios --save-dev,npm install qs;

 而後在src目錄下新建一個http.js文件進行接口請求的相關配置，

import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs';


var instance = axios.create({
  //baseURL: 'https://some-domain.com/api/',
  timeout: timeout,
  responseType: 'json', // default,
  //headers: {'apikey': 'foobar'},
    transformRequest:function(data,headers){
     //爲了不qs格式化時對內層對象的格式化先把內層的對象轉爲
     //因爲使用的form-data傳數據因此要格式化
      if (typeof data == 'string') {
        
            headers.post['Content-Type'] = "application/json; charset=utf-8";
        
        }
      else if(!(data instanceof FormData)){
      headers.post['Content-Type'] = "application/x-www-form-urlencoded";
      
         for(let key in data){
            if(data[key]===undefined){
                data[key]=null;
            }
         }
         data = Qs.stringify(data);
    }

     return data;
    }
});
export default instance;  

Vue.prototype.$http=instance;

在使用請求接口的時候直接能夠這樣用：(具體用法能夠看下官方文檔)

this.$http.get(url).then((res)=>{
}）

3.引入elementUI，跟人感受elementUI是比較好用的vue組件UI，不少東西不用本身去寫，推薦使用，跑指令npm install element-ui --save,

而後在main.js中引入使用

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

固然也能夠按需引入，想用什麼組件就引入什麼組件，不要所有引入，這樣減小體積。

4.引入vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

安裝：npm install vuex --save

具體使用這裏不作詳細介紹，感興趣的能夠看下中文官網：https://vuex.vuejs.org/zh-cn/。