Vue指令

创建项目：

vue init webpack 项目名称

element-ui

npm i element-ui -s

axios

npm i axios@1.1.3 -S

vuex

npm i vuex@3.6.2 -S

vuex持久化

npm i -S vuex-persistedstate@4.1.0

代理模版

   proxyTable: {'/api': {target: 'http://localhost:8081/',changeOrigin: true,pathRewrite: {'^/api': '/ktnews/api'}},'/static': {target: 'http://localhost:8081/',changeOrigin: true,pathRewrite: {'^/static': '/ktnews/static'}}},

stroe index.js 

import Vue from 'vue'
import Vuex from "vuex";
import UserStore from "./modules/user";
import VuePersistedStatePlugin from 'vuex-persistedstate';Vue.use(Vuex)const store = new Vuex.Store({plugins: [VuePersistedStatePlugin({storage: window.localStorage,reducer: (state) => {return {UserStore: state.UserStore}}})],state: {//根数据，可以直接使用this.$store.state.count访问count: 0},modules: {UserStore}
})export default store;

//用户未登录的默认数据
const defaultUserInfo={nickname:'未登录',username:'未登录',avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
}
//用户登录的数据
const state={userInfo:defaultUserInfo,//先使用默认数据isLogin:false
}
//控制信息修改的方法
const mutations={login(state,userInfo){//登录console.log('登录:',userInfo)state.userInfo=userInfo;state.isLogin=true;},logout(state){//退出登录console.log('退出登录')state.userInfo=defaultUserInfo;state.isLogin=false;}
}
export default {state,mutations,
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import Store from "./store";Vue.config.productionTip = false
Vue.prototype.$axios = axios;Vue.prototype.$store = Store;
Vue.use(ElementUI);/* eslint-disable no-new */
new Vue({el: '#app',router,store: Store,components: {App},template: '<App/>'
})