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

 

转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/7351276.html