# element-ui基础使用
# 一、初始化
还是是用 webpack
进行初始化项目:vue init webpack hello-vue-element
安装 vue-router
路由:npm install vue-router --save-dev --registry=https://registry.npm.taobao.org
进入项目目录,安装 element-ui
依赖:npm i element-ui -S --registry=https://registry.npm.taobao.org
安装 SASS
加载器:npm install sass-loader node-sass --save-dev --registry=https://registry.npm.taobao.org
安装项目依赖:npm install --registry=https://registry.npm.taobao.org
启动项目:npm run dev
# 二、实现登录跳转
在根目录的 main.js
中引入 element-ui
:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {App},
template: '<App/>',
router,
render: h => h(App)
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
创建 router
目录,初始化 index.js
:
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router);
export default new Router({
routes: [
{
name: 'Login',
path: '/login',
component: Login
},
{
name: 'Main',
path: '/main',
component: Main
},
]
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
在 src
下创建 router
和 views
,首先在 views
中创建首页 Loign.vue
和 Main.vue
。
Login.vue
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-box">
<h1 class="login-title">欢迎登录</h1>
<el-form-item label="账号" prop="username">
<el-input v-model="form.username">l</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password">l</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('form')">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
{required: true, message: '请输入密码', trigger: 'blur'}
]
}
}
},
methods: {
login(form) {
this.$refs[form].validate((valid) => {
if (valid) {
this.$router.push("/main");
} else {
this.$message.error('请输入正确的账号密码');
return false;
}
});
}
}
}
</script>
<style scoped>
.login-title {
text-align: center;
}
.login-box {
width: 400px;
border: 1px solid #DCDFE6;
margin: 150px auto 0;
padding: 20px 50px 20px 20px;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 20px;
}
</style>
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
这里的 :model="form'
其实就是 v-model="form"
,做双向数据绑定的。
:rules="rules"
是绑定校验规则,对于需要做校验的 <el-form-item
需要添加 prop="username
属性,一个控件的校验规则可以有多个,所以在 rules
的 username
包含的是一个数组,required: true, message: '请输入账号', trigger: 'blur'
表示必填项,并且在失去光标焦点的时候进行验证,验证不通过则会显示 message
中的信息。
使用 this.$router.push("/main");
做路由跳转。
使用 this.$message.error('请输入正确的账号密码');
做一个错误的消息提示。
# 三、实现主界面布局
`Main.vue'
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>用户管理</template>
<el-menu-item-group>
<template slot="title">操作</template>
<el-menu-item index="1-1">
<router-link to="/user/add">新增用户</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>商品管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">新增商品</el-menu-item>
<el-menu-item index="2-2">商品列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main",
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
}
</script>
<style scoped>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
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
在需要做路由替换的部分使用 <router-view/>
进行替换。
使用 <router-link to="/user/add">新增用户</router-link>
进行路由的跳转链接设置。
因为这里添加了子路由,所以需要修改路由的配置文件:
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import UserAdd from '../views/user/Add'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes: [
{
name: 'Login',
path: '/login',
component: Login
},
{
name: 'Main',
path: '/main',
component: Main,
children: [
{name: 'UserAdd', path: '/user/add', component: UserAdd},
{name: 'UserList', path: '/user/list', component: UserList},
]
},
]
});
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
所以需要在 views
目录下创建 user
子目录,里面创建 Add.vue
和 List.vue
,这里导入的时候起了别名。
# 四、其它设置
# 1、参数传递
# (1)使用路径匹配方式传参
{name: 'UserAdd', path: '/user/add/:id', component: UserAdd},
其中使用 path: '/user/add/:id'
进行参数传递,参数名为 id
在页面中使用 <router-link to="/user/add/1">新增用户</router-link>
进行赋值。
接受参数的页面:
<template>
<div>
新增用户
{{$route.params.id}}
</div>
</template>
<script>
export default {
name: "Add"
}
</script>
<style scoped>
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
使用 接受参数
# (2) 使用 props 传参
在接收参数的页面定义参数:
<template>
<div>
用户列表
{{id}}
</div>
</template>
<script>
export default {
name: "List",
props: ['id']
}
</script>
<style scoped>
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用 props: ['id']
定义,可以定义多个。
在路由配置文件配置:
{name: 'UserList', path: '/user/list/:id', component: UserList, props: true},
在页面上还是使用 <router-link to="/user/list/2">用户列表</router-link>
就可以参数传递了
# 1、重定向
在路由配置文件中添加如下:
{
path: '/home',
redirect: '/main'
}
2
3
4
当路径为 /home
时,会重定向到 main
# 2、路由模式
默认的路由模式是“哈希模式”,即在浏览器地址中带有 #
。
在路由配置文件新增配置:
mode: 'history',
就可以修改路由模式为 history
模式,去掉了 #
。但是不建议使用 history
模式。
# 3、404页面
在 views
目录中新创建一个 404.vue
页面:
<template>
<div>
页面不存在
</div>
</template>
<script>
export default {
name: "404"
}
</script>
<style scoped>
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
然后在路由配置中进行配置:
{
path: '*',
component: NotFound
}
2
3
4
注意这个配置要写在 routes
数组的最后一位,因为当所有的匹配都不符合时,才会进到这个路由。
# 五、路有钩子与异步请求
安装 axios
:npm install axios -s -registry=https://registry.npm.taobao.org
在 main.js
中引入:
import axios from 'axios'
Vue.prototype.axios = axios;
2
3
在 static
目录下创建 json
文件:
{
"name": "jerry",
"age": 31,
"gender": "M"
}
2
3
4
5
然后在需要调用接口的页面这样子写:
export default {
name: "List",
props: ['id'],
c(to, from, next) {
next(vm => {
vm.getData();
});
},
beforeRouteLeave(to, from, next) {
next();
},
methods: {
getData() {
this.axios({
type: 'get',
url: 'http://localhost:8080/static/data.json'
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
beforeRouteEnter()
这个方法是页面路由进入前执行的方法,这里调用了 next()
,将方法传递下去,然后调用了 vm
实例的 getData()
方法,也就是下面定义的方法,进行了异步请求。
# 六、vuex状态管理
安装依赖:cnpm install vuex --save
main.js
中引入:
import Vuex from 'vuex'
Vue.use(Vuex);
2
在登录成功的地方使用 sessionStorage
保存会话信息
sessionStorage.setItem('isLogin', 'true');
在页面需要进行注销的地方使用 <router-link to="/logout">注销</router-link>
完成注销。
在 main.js
中添加钩子函数:
router.beforeEach((to, from, next) => {
let isLogin = sessionStorage.getItem('isLogin');
if (to.path == '/logout') {
sessionStorage.clear();
next({path: '/login'});
return;
} else if (to.path == '/login') {
if (isLogin == 'true') {
next({path: '/main'});
return;
}
} else if (isLogin == null) {
next({path: '/login'});
return;
}
next();
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这里注意如果路由是哈希模式的情况下,需要在 next({path: ''})
之后写 return
才可以达到效果,history
模式则不需要写 return
。
这个 beforeEach()
方法是在进入路由的时候都会执行的方法,全局有效。
通过获取 sessionStorage
中是否存储 isLogin
的 key
来判断是否登录,并且如果路由到的地址是 /logout
的时候清空 sessionStorage
并跳转到登录页。
接着在 src
目录下创建 store
目录,创建 index.js
:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 状态
const state = {
user: {
username: ''
}
};
// 获取状态中的值,是计算属性
const getters = {
getUser(state) {
return state.user;
}
};
// 更新 state 的状态(同步)
const mutations = {
updateUser(state, user) {
state.user = user;
}
};
// 调用 mutations 更新 state(异步)
const actions = {
updateUserAsync(context, user) {
context.commit('updateUser', user);
}
};
export default new Vuex.Store({
state,
getters,
mutations,
actions,
});
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
这里面有 vuex
非常重要的4个值:
- state
用来保存状态的对象
- getters
获取状态中的值,是计算属性
- mutations
更新 state
的状态(同步)
- actions
调用 mutations
更新 state
(异步)
在 main.js
中引入 store
import store from './store'
new Vue({
el: '#app',
components: {App},
template: '<App/>',
router,
store,
render: h => h(App)
});
2
3
4
5
6
7
8
9
10
此时需要在原来登录成功的地方加上:
this.$store.dispatch('updateUserAsync', this.form);
这里使用 this.$store.dispatch
调用的是 store
的 actions
,异步调用 updateUserAsync()
方法来更新信息。
在页面上需要显示的地方,这样显示:
<span>{{this.$store.getters.getUser.username}}</span>
这里调用的是 store
的 getters
里面的 getUser()
方法。
此时刷新页面仍然会导致 vuex
重置,信息就没了。
此时需要在刷新之前将 vuex
保存的内容存储到 session
中,在刷新完毕后,将信息取出来重新放回到 vuex
。
在 App.vue
中添加钩子函数,捕获刷新事件:
export default {
name: 'App',
mounted() {
window.addEventListener('unload', this.saveState);
},
methods: {
saveState() {
sessionStorage.setItem('state', JSON.stringify(this.$store.state));
}
}
}
2
3
4
5
6
7
8
9
10
11
修改 store
中的配置文件:
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
user: {
username: ''
}
};
2
3
4
5
此时先从 session
中读取信息,如果没有再初始化。
由于 store
中以后会存很多数据,所以这里创建 user
目录,里面新建 index.js
文件,将所有和用户相关的信息都放在这里:
const User = {
state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
user: {
username: ''
}
},
getters: {
getUser(state) {
return state.user;
}
},
mutations: {
updateUser(state, user) {
state.user = user;
}
},
actions: {
updateUserAsync(context, user) {
context.commit('updateUser', user);
}
}
}
export default User;
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
总的 store
配置文件修改为:
import Vue from 'vue'
import Vuex from 'vuex'
import User from './user'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
User
}
});
2
3
4
5
6
7
8
9
10
11
App.vue
中的保存信息的需要调整为:
sessionStorage.setItem('state', JSON.stringify(this.$store.state.User));
← Vue进阶