蓝桥到家复盘与总结

• vue-admin-template 后台管理开源模版
• 开发需掌握要点
• 1. 新建页面
• 1.1 新建页面 一般 在src文件夹下的views文件夹下新建，一般按照模块来新建
• 2. 新建路由
• 2.1 新建路由在src/router/index.js内新建
• 2.2 注意点：path不能重复、name不能重复

---

• 3. vuex的使用
• 3.1 新建state变量

const state = {
  classes: "计应3班"
}

• 3.2 新建mutations方法

const mutations = {
  SET_CLASS: (state, classes) => {
    state.classes = classes
  },
}

• 3.3 外部组件触发mutations方法，其中需要注意的是 school这个命名空间要写

this.$store.commit('school/SET_CLASS','计应3班精英班')

• 3.4 新建actions方法

const actions = {
  changeStateClass({ commit, state },classes) {
    commit('SET_CLASS',classes)
  },
}

• 3.5 外部组件触发actions方法

this.$store.dispatch('school/changeStateClass','计应3班精英班')

• 3.6 配置getters变量
• 在getters.js文件内,其中需要注意的是school这个位置，需要根据实际情况来变化

classes: state => state.school.classes,

• 3.7 外部组件读取getters变量
• 第一步要先从vuex解构出 mapGetters

import { mapGetters } from "vuex";

• 第二部使用计算属性读取getters变量

computed: {
    ...mapGetters(["classes"]),
  },

• 3.8 vuex命名空间namespaced

namespaced: true,

---

• 4. vant-ui组件库的安装与使用

安装
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
------------------------------------------
引入
全局引入
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

• 5. 反向代理的配置与使用
     在vue.config.js的devServer里配置，其中target是我们要代理的api接口域名，那么我们的反向代理的接口域名就变成了 /api

 proxy: {
      //配置跨域
      '/api': {
        target: "https://lanqiao.it98k.cn",
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

• 还需要配置一下环境变量
• 修改本地环境变量 .env.development

VUE_APP_BASE_API = '/api'

记住，配置完vue.config.js 和 .env.development 要重启项目才会生效

• 6. api方法的定义与使用
• 6.1 在src/api/xxxx.js文件内新建api方法
• 6.2 注意点：get方式传参使用params ，put、post、delet请求方式使用data来传参
• 导入api方法使用import
• 7. 组件的新建与引入
• 新建组件一般在src/components下，
• 引入使用import
• 注册使用components
• 使用 直接