Vue CLI 项目创建

Vue CLI 需要 Node.js 8.9 或更高版本。

1、安装Vue CLI 

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

安装指定版本
npm install -g @vue/cli@3.11.0

2、运行以下命令来创建一个新项目

vue create hello-world

3、组件安装

3.1、安装scss

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

3.2、安装JQuery

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

3.2、安装ElementUI

npm i element-ui -S

使用：

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

Vue.use(ElementUI)

3.3、安装axios

npm install axios -S

//配置axios
import axios from 'axios'
import qs from 'qs'

3.4、VUE中使用store

　　

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

界面刷新后store中保存的数据会被清空，要在刷新的时候保存一下，刷新完成后再赋值。

在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))
    });
  },

 3.5、安装路由vue-router

npm install vue-router --save-dev