（一）vscode搭建springboot后端项目
（二）vscode搭建vue前端项目
（三）调整vue项目src文件夹的基本结构
（四）编写layout的头部栏和侧边栏

使用vuex存放用户信息

一、创建文件夹store，在store文件夹中创建modules文件夹，在其中编写userInfo.js用以存放全局的userInfo

// userInfo.js
const state = {
    userInfo: {},
  }
  // getters
  const getters = {
    userInfo: (state) => state.userInfo,
  }
  // mutations
  const mutations = {
    SET_USERINFO: (state,userInfo) => {
      state.userInfo = userInfo
    },
  }
  //actions
  const actions = {
    set_userInfo({ commit }, userInfo) {
      commit('SET_USERINFO', userInfo)
    },
  }
  export default {
    state,
    getters,
    actions,
    mutations,
  }

二、编写store文件夹下的index.js，导入userInfo模块

import Vue from 'vue'
import Vuex from 'vuex'
// 导入各个模块的初始状态和 mutations
import userInfo from "./modules/userInfo";

Vue.use(Vuex)
export default new Vuex.Store({
  // 组合各个模块
  modules: {
    userInfo
  },
})

三、在main.js中导入store

四、出现问题“Module not found: Error: Can’t resolve ‘module’”，解决方法：npm install module，再出现问题“Module not found: Error: Can’t resolve ‘vuex’”，解决方法：npm install vuex，接着无报错

五、注意引入userInfo模块时不能使用花括号，因为export时使用了default

六、使用示例

// 1.引入vuex的辅助函数
import { mapGetters, mapActions } from "vuex";
// 2.在computed中通过getters获取userInfo
computed:{
    ...mapGetters(['userInfo'])
},
// 3.在methods中获取userInfo的actions方法
...mapActions(["set_userInfo"]),
// 4.通过actions方法设置userInfo的值
this.set_userInfo({
	token: 'NXJANSJX',
	img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1111938570,2063449563&fm=26&gp=0.jpg',
	name: '望学庭'
})