Vue系列（四）：模塊化開發、Elment UI、自定義全局組件（插件）、Vuex

上一篇：Vue系列（三）：組件及數據傳遞、路由、單文件組件、vue-cli腳手架

1、模塊化開發

1. vue-router模塊化

cnpm install vue-router -S

1.1 編輯main.js

//引入VueRouter 
import VueRouter from 'vue-router'

//使用VueRouter
Vue.use(VueRouter);

import routerConfig from './router.config.js'
//建立路由實例
const router=new VueRouter(routerConfig);

1.2 編輯App.vue

1.3 編輯router.config.js

export default {
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News
        }
    ]
}

2. axios模塊化

cnpm install axios -S

使用axios的兩種方式：
    方式1：在每一個組件中引入axios
    方式2：在main.js中全局引入axios並添加到Vue原型中

3. 爲自定義組件添加事件

//爲自定義組件加修飾符：native
<MyButton @click.native="send"></MyButton>

模塊化開發

2、 Elment UI

1. 簡介

Element UI是餓了麼團隊提供的一套基於Vue2.0的組件庫，能夠快速搭建網站，提升開發效率
    ElementUI  PC端
    MintUI 移動端

官網

2. 快速上手

2.1 安裝elment ui

cnpm install element-ui -S

2.2 在main.js中引入並使用組件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' //該樣式文件須要單獨引入
Vue.use(ElementUI);
這種方式引入了ElementUI中全部的組件

2.3 在webpack.config.js中添加loader

CSS樣式和字體圖標都須要由相應的loader來加載，因此須要style-loader、css-loader

默認並無style-loader模塊，因此須要單獨安裝
    cnpm install style-loader --save-dev

2.4 使用組件

2.5 使用less

安裝loader，須要兩個：less、less-loader
    cnpm install less less-loader -D
在webpack.config.js中添加loader

3. 按需引入組

3.1 安裝babel-plugin-component

cnpm install babel-plugin-component -D

3.2 配置.babelrc文件

"plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
]]]

3.3 只引入須要的插件

3、 自定義全局組件（插件）

全局組件（插件）：就是指能夠在main.js中使用Vue.use()進行全局引入，而後在其餘組件中就均可以使用了，如vue-router
    import VueRouter from 'vue-router'
    Vue.use(VueRouter);

普通組件（插件）：每次使用時都要引入，如axios
    import axios from 'axios'

自定義全局組件（插件）

4、 Vuex

1. 簡介

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來講，用來集中管理數據，相似於React中的Redux，都是基於Flux的前端狀態管理框架

2. 基本用法

2.1 安裝vuex

cnpm install vuex -S

2.2 建立store.js文件，在main.js中導入並配置store.選項

import store from './store.js' //導入store對象

new Vue({
  store, //配置store選項，指定爲store對象，會自動將store對象注入到全部子組件中，在子組件中經過this.$store訪問該store對象
  el: '#app',
  render: h => h(App)
})

2.3 編輯store.js文件

Vuex的核心是Store(倉庫)，至關因而一個容器，一個store實例中包含如下屬性的方法：
    state       定義屬性（狀態、數據）
    getters     用來獲取屬性
    actions     定義方法（動做）
    commit      提交變化，修改數據的惟一方式就是顯式的提交mutations
    mutations   定義變化
    注：不能直接修改數據，必須顯式提交變化，目的是爲了追蹤到狀態的變化

/**
 * vuex配置
 */

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//定義屬性（數據）
var state={
    count:6
}

//定義getters
var getters={
    count(state){
        return state.count;
    },
    isEvenOrOdd(state){
        return state.count%2==0?'偶數':'奇數';
    }
}

//定義actions，要執行的操做，如流程判斷、異步請求等
const actions = {
    increment(context){//包含：commit、dispatch、state
        console.log(context);
        // context.commmit()
    },
    // increment({commit,state}){
    //     commit('increment'); //提交一個名爲increment的變化，名稱可自定義，能夠認爲是類型名
    // },
    decrement({commit,state}){
        if(state.count>10){
            commit('decrement');
        }
    },
    incrementAsync({commit,state}){
        //異步操做
        var p=new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve();
            },3000);
        });

        p.then(() => {
            commit('increment');
        }).catch(() => {
            console.log('異步操做');
        });
    }
}

//定義mutations，處理狀態（數據）的改變
const mutations={
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }
}

//建立store對象
const store=new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

//導出store對象
export default store;

2.4 編輯App.vue

在子組件中訪問store對象的兩種方式：
    方式1：經過this.$store訪問
    方式2：經過mapState、mapGetters、mapActions訪問，vuex提供了兩個方法：
        mapState    獲取state
        mapGetters  獲取getters
        mapActions  獲取actions

3. 分模塊組織Vuex

|-src
    |-store
        |-index.js
        |-getters.js
        |-actions.js
        |-mutations.js
        |-modules  //分爲多個模塊，每一個模塊均可以擁有本身的state、getters、actions、mutations
            |-user.js
            |-cart.js
            |-goods.js
            |....

完！

參考Vue教學視頻：Vue.js 2.0之全家桶系列視頻課程（vue、vue-router、axios、vuex）