vue2(实战)
1.vue中引入插件
a、可以在index.html中直接引入;b.可以在main.js中require()/import;
2.css-loader在webpack2中配置loader不能省略:
{
test:/\.css$/,
loader:'style-loader|css-loader' 顺序不能换
}
3.之前项目知识点
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
页面中引入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; } }