vue-element-admin学习

基础文档学习

1. vue文档
2. vue-element-admin文档

安装

1. 源码下载地址

运行流程（登录为例）

1. 初始化(main.js)

2. 查找路由(route/index.js)

定义路由(login)，对应视图(views/login/index)

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
},

1. 查找’界面’ (views/login/index.vue)

2. 查找store(store/modules/user.js)

调用store中定义的actions

this.$store.dispatch('LoginByUsername', ......

1. 查找接口调用定义(api/login.js)

定义loginByUsername调用的接口地址

export function loginByUsername(username, password) {
  const data = {
    username,
    password
  }
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

1. 遍历rule时判断(permission.js)

   定义遍历rule前具体代码

   router.beforeEach(……

mock数据

加载位置(main.js)

import './mock' //不需要mock的话，将这里注释

mock的接口

Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)

mock具体数据(mock/login.js)

loginByUsername: config => {
    const { username } = JSON.parse(config.body)
    return userMap[username]
},

修改为自己定义的host(dev.env.js)

module.exports = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"http://demo.com/api"'
}

设置跨域信息

header('Access-Control-Allow-Origin:*');//生产环境记得对指定域名添加
header('Access-Control-Allow-Headers:Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
header('Access-Control-Expose-Headers:Authorization, authenticated');
header('Access-Control-Allow-Methods:GET, POST, PATCH, PUT, OPTIONS');
header('Access-Control-Allow-Credentials:true');        

https://www.jianshu.com/p/d3e3b21696e4