vue-element学习（一）

day1

学习视频地址

1.使用vue ui创建项目，并下载相关插件vue-router、element-ui、axios、less、less-loader

这里说一下，如果是为了学习方便，建议先关闭eslint语法校验，要不然写起来很麻烦（初学写的不太规范，然后他就会各种报错）

2.清理不需要的组件和内容(保持一个干净的环境)

3.在components文件夹下建立Login登录组件

4.登录组件布局

5.登录组件头部布局

6.登录组件表单布局

7.表单小图标

8.登录表单数据绑定

9.登录表单数据验证

10.登录表单数据重置

11.登录成功或失败的提示

12.导航守卫实现（遇到的问题）

13.退出功能实现

目录结构：

main.js

element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线

vue 0星 超过10%的资源 7KB

下载

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

import '@/assets/css/global.css'

import axios from "axios";
axios.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/';
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next();
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) return next('/login');
  next()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

assets/css/global.css

html,body,#app {
    margin: 0;
    padding: 0;
    height: 100%;
}

1
2
3
4
5
6

Login.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

Home.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

login页面

vue-timeLine.vue

vue 0星 超过10%的资源 9KB

下载

home页面

最后写一下添加导航守卫时遇到的问题

1.当在使用路由导航守卫做路由控制时，写如下代码后，控制台报错Cannot access 'router' before initialization

// 挂载路由导航守卫
router.beforeEach((to,from,next) =>{
  if (to.path === '/login') return next();
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) return next('/login')
  next()
})

const router = new VueRouter({
  routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13

原因是这段代码写在了路由初始化代码之前，应该把挂载路由导航守卫放在路由初始化代码后面，如下

const router = new VueRouter({
  routes
})

export default router

// 挂载路由导航守卫
router.beforeEach((to,from,next) =>{
  if (to.path === '/login') return next();
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) return next('/login')
  next()
})
1
2
3
4
5
6
7
8
9
10
11
12
13

这样就可以了