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

 

posted @ 2017-08-12 19:45  九门提督琪琪  阅读(312)  评论(0编辑  收藏  举报