vue2(實戰)

1.vue中引入插件

a、能夠在index.html中直接引入；b.能夠在main.js中require()/import;

2.css-loader在webpack2中配置loader不能省略：

{
test:/\.css$/,
loader:'style-loader|css-loader' 順序不能換 
}

3.以前項目知識點

頁面中引入css:
    先要下載；
    而後import:
        import ElementUI from 'element-ui'
        import '路徑'；
    而後vue.use(ElementUI)；
    而後要去webpack.config.js中去配置：
        {
            test:/\.css$/,
            loader:'css'
        }
bug:字體圖標引入 file-loader:先npm下載依賴文件；
    而後在webpack.config.js中去配置：
        去官網找能夠找到
        {
            test:/\.（eot|svg|ttf|woff|woff2）$/,
            loader:'file',
        }
使用的時候要用到style-loader須要npm一下-D；配置
    {
            test:/\.css$/,
            loader:'style|css'  順序不能換
        }

使用less：
    lang設置爲less；
    而後下載依賴less和less-loader；
    而後配置webpack：
         {
            test:/\less$/,
            loader:'less'
        }
    使用：定義變量@color：red，調用的時候直接和js相似當變量填充；
          定義方法.h50(@h){height:@h},調用.h50(30px);
按需引入組件：
   首先下載babel-plugin-component;
   而後在babelrc中新增plugins配置：
    {
        "presets":[
            {"es2015",{"modules":false}}
        ],
        "plugins":[["component",[
            {
                "libraryName":"element-ui",
                "styleLibraryName":"theme-default"
        }
        ]]]
    }官方也有
    而後下載element-ui；配置webpack：
        {
            test:/\.css$/,
            loader:'style|css'  順序不能換
        }
    在mian.js中引入須要的組件：import {Button} from 'element-ui' 而後使用 Vue.use(Button)
    老方法使用 Vue.component(Button.name,Button);    
    將組件單獨放文件element-ui.js:
        首先import Vue from 'vue';還要引入掛載的點：import App from './App.vue'//本身總結；
            最後要引入 import {Button,Radio..}‘element-ui.js路徑’； 一樣Vue.use()...

本身定義的組件須要註冊事件的話@click.native="get"

交互axios：
    1.import axios from 「axios」
    2.下載依賴
    3.github語法


miti-ui適合移動端：-S是--save縮寫
    import Mint from 'miti-ui'
    import "style.css的路徑"


vuex集中管理數據：
前提建立vue項目模板而後下載依賴npm i 
1.npm 下載vuex -D
2.建立store.js
  在main中引入import store from ‘store.js的相對路徑’和實例化
    new Vue({store})
3.vuex提供兩個比較重要的方法：
    mapAction 管理全部的事件
    mapGetters 獲取數據
app.vue中引入這兩個方法：import {mapActions,mapGetters} from 'vuex'
       再export default{
        computed:mapGetters['count']
        methods:mapActions(['increment'事件名稱用逗號隔開])
    }
4.store.js：
  import Vue from ‘vue’
  import Vuex from ‘vuex’

  Vue.use(Vuex);

  var state={count:10};

  const mutations={//處理數據的變化
   increment(state){state.count++;}
  };    
  const actions = {
    increment:({commit})=>{commit('increment')} //{commit,state}
  }

  const getters={
    count(state){
        return state.count;
    }
  }
 //須要導出Store對象
export default new Vuex.store({state，mutations，actions,getters});
5.    異步操做 new promise（（resolve）=》{setTimeout（function（）{commit("incresement";resolve();}1000);};）}）

type.js:
  export const INCREMENT='INCREMENT';
actions.js:
 import * as types from './types.js'
 export default{
  increment:({commit}=>{commit(types.INCREMENT)})
 }
mutations.js:
import {INCREMENT} from './types'
import getters from './getters'
const state={
 count:20
}
const mutations={
[INCREMENT](state){state.count++;}
}
 export default{
        state,mutations,getters
    }
index.js:
  import Vue from ‘vue’
  import Vuex from ‘vuex’

  Vue.use(Vuex);
  import mutations from './mutations'
  import actions from './actions'
  export default new Vuex.store({mudules:{mutations}，actions});
getters.js:
      export default{
        count(state){
        return state.count;
    }
    }

View Code