vue2实战
# 安装
# 安装脚手架
## 全局安装脚手架
npm i @vue/cli -g
## 查看脚手架版本、
vue -V
## 创建vue2项目
vue create pro
cd pr
## 运行
npm run server
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# element-ui 的使用
# 安装
npm i element-ui -S
1
# 引入main.js
## 全局引入组件库
import ElementUI from 'element-ui'
## 全局引入样式
import 'element-ui/lib/theme-chalk/index.css'
## 使用
Vue.use(ElementUI)
1
2
3
4
5
6
2
3
4
5
6
# css预处理器以及样式重置
# 安装sass
npm i sass-loader@7 node-sass@4 -S
1
# 安装less
npm i less@3 less-loader@7 -S
1
# 全局样式重置
# 图标库的安装和使用
https://fontawesome.dashgame.com
## 安装
npm install font-awesome --save
## 引入css样式
import 'font-awesome/css/font-awesome.min.css'
## 使用
<i class="fa fa-user-o"></i>
1
2
3
4
5
6
2
3
4
5
6
# axios和路由的安装和使用
# axios安装
npm i axios -S
1
# 安装路由
npm i vue-router -S
1
# 配置路由
import Vue from 'vue'
import vueRouter from 'vue-router'
import Home from '@/components/Home.vue'
// 使用vue-router
Vue.use(vueRouter)
export default new vueRouter({
// 路由模式
mode: 'hash',
// 配置路由信息
routes: [
{
path: '/home',
component: Home
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 使用路由懒加载
{
path: '/home',
compotent: () => import('@/components/Home.vue') //路由懒加载
// 异步组件
// compotent: resolve => require(['@/components/Home.vue'],resolve)
}
1
2
3
4
5
6
2
3
4
5
6
# 登录页和404页面
# 登录页验证
<template>
<div class="login">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>某某后台管理系统</span>
</div>
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import {valideName,validePassward} from '../utils/validate.js'
import { setToken } from '../utils/setToken.js'
import { login } from '@/api/api.js'
export default {
data() {
return {
form: {
username: 'admin',
password: '124a/'
},
rules: {
username: [{validator: valideName, trigger: 'blur'}],
password: [{validator: validePassward, trigger: 'blur'}],
}
}
},
methods: {
login() {
this.$refs['form'].validate(valid =>{
if(!valid) {
return
}
login(this.form).then(res => {
if(res.data.status === 200) {
debugger
setToken('token',this.form)
this.$message.success('登录成功')
this.$router.push('/home')
}
})
// 登录换成api调用
// this.api.post('/login',this.form).then(res => {
// if(res.data.status === 200) {
// setToken('token',res.data.token)
// this.$message.success('登录成功')
// this.$router.push('/home')
// }
// })
})
}
}
}
</script>
<style lang="scss">
.login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.el-card {
width: 450px;
&__header {
font-size: 20px;
text-align: center;
}
.el-button {
width: 100%;
}
}
}
</style>
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
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
# 封装axios
上次更新: 2023/03/05, 15:03:00