Vue CLI 项目创建

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create hello-world

npm install sass-loader --save-dev
npm install node-sass --sava-dev
使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法

npm install jquery --save
在main.js文件夹中引入： import $ from ‘jquery‘

npm i element-ui -S

使用：

import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘

Vue.use(ElementUI)

npm install axios -S

//配置axios
import axios from ‘axios‘
import qs from ‘qs‘

1、引入vuex
npm install vuex --save
创建store.js文件
import vue from ‘vue‘
import  vuex from ‘vuex‘

vue.use(vuex);

//新增公共变量

//获取：this.$store.state.hasERP;
//修改: this.$store.commit(‘setData‘,{hasERP:1})

export default new vuex.Store({
  state: {
    roles: {},
    groups: {},
    userInfo: {},
  },
  mutations:{
    setData(state,obj){
      for(let k in state){
        if(obj.hasOwnProperty(k)){
          state[k] = obj[k];
        }
      }
      // console.log(state)
    },
    clearData(state){
      for(let k in state){
        if(k === ‘roles‘||k === ‘groups‘||k===‘userInfo‘){
          state[k] = {};
        }else{
          state[k] = ‘‘;
        }
      }
    }
  }
});

main.js 中

import store from ‘./store‘

new Vue 中添加store. 
new Vue({ render: h => h(App), router, store, }).$mount(‘#app‘)

改变store 中的值
this.$store.commit(‘setData‘,{
 roles:data,
});

获取store变量的值
let roles =this.$store.state.roles

在App.vue文件中添加
created(){
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))));
      sessionStorage.removeItem(‘store‘);
    }
    // console.log(sessionStorage.getItem("store"))
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    });
  },

npm install vue-router --save-dev