Vue.js 2.0之全家桶系列視訊課程——筆記（四）

視訊課程連結：https://edu.csdn.net/course/detail/7906

一、模組化開發

1. vue-router模組化

cnpm install vue-router -S

1.1 編輯main.js

1.2 編輯App.vue

1.3 編輯router.config.js

2. axios模組化

cnpm install axios -S

使用axios的兩種方式：
    方式1：在每個元件中引入axios
    方式2：在main.js中全域性引入axios並新增到Vue原型中

3. 為自定義元件新增事件

二、 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 只引入需要的外掛

三、 自定義全域性元件（外掛）

全域性元件（外掛）：就是指可以在main.js中使用Vue.use()進行全域性引入，然後在其他元件中就都可以使用了，如vue-router
    import VueRouter from 'vue-router'
    Vue.use(VueRouter);

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

四、 Vuex

1. 簡介

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
簡單來說，用來集中管理資料，類似於React中的Redux，都是基於Flux的前端狀態管理框架           

2. 基本用法

2.1 安裝vuex

cnpm install vuex -S

2.2 建立store.js檔案，在main.js中匯入並配置store.選項

2.3 編輯store.js檔案

Vuex的核心是Store(倉庫)，相當於是一個容器，一個store例項中包含以下屬性的方法：
    state       定義屬性（狀態、資料）
    getters     用來獲取屬性
    actions     定義方法（動作）
    commit      提交變化，修改資料的唯一方式就是顯式的提交mutations
    mutations   定義變化
    注：不能直接修改資料，必須顯式提交變化，目的是為了追蹤到狀態的變化 

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
            |....