vue实践录：element ui入门

vue 310 字 次

本文记录学习 vue-element-admin 的基础知识点，由于所求快速上手，以关注点为准。

登录过程

1
2
3
4
5
views/login/index.vue：页面设计，响应，处理登录 handleLogin  
this.$store.dispatch('user/login', this.loginForm) 
找到store/user.js的login，该函数调用login，来自 import { login, logout, getInfo } from '@/api/user'  
找到api/user.js文件的login，该函数有url，请求为：import request from '@/utils/request'
找到utils/request.js

axios请求：

1
2
3
4
5
6
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

注：VUE_APP_BASE_API为自定义的变量，在其它地方也使用到。

src/persission.js：

1
2
3
4
5
router.beforeEach(async(to, from, next) => {
const hasToken = getToken()
if (hasToken) {
}
}

vue的模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
  </div>
</template>

<script>
    export default {
        data () {
            return {
            }
        }
    }
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
\src\components\Sidebar.vue   1:1  error  Parsing error: Unexpected token <

eslint 有问题。

component inside transition renders non-element root node that cannot be animated
<template>里面要有div

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

一些参考的：

vue-framework-wz

vue-manage-system

vue-manage-system-plus

vue-element-admin