Vue + Element UI快速入门

项目源码:https://github.com/woodwhales/woodwhales-study/tree/master/woodwhales-vue-demo

脚手架搭建

步骤1:全局安装 vue 2.0

1
cnpm install vue-cli -g

查看 vue 版本命令:vue -V

步骤2:在一个空目录中创建工程

执行 vue 初始化工程命令:

1
vue init webpack my-demo
  • 当提示到是否安装:Install vue-router?,输入y

  • 提示是否安装:Use ESLint to lint your code?,输入n

  • 其他选项全部输入y

安装完成,提示如下信息:

1
2
3
4
5
6
7
8
9
# Project initialization finished!
# ========================

To get started:

cd my-demo
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

根据安装完成的提示,进入 my-demo 目录,执行npm run dev命令,浏览器访问:http://localhost:8080 地址即可看到vue-cli脚手架搭建的基础工程。

步骤3(可选):修改启动端口号

config/index.js配置文件中,配置了项目的启动基础参数:

1
2
3
host # 项目启动的主机名
port # 项目启动的端口号
autoOpenBrowser #是否启动时自动打开浏览器并访问

创建自定义组件

components文件目录下创建Index.vue文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
{{ msg }}
</div>
</template>

<script>

export default {
name: 'Index',
data () {
return {
msg: 'this index page'
}
}
}
</script>

<style>

</style>

router/index.js文件中将Index组件引入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
}
]
})

App.vue文件中将Index组件引入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div id="app">
<Index/>
<!-- <router-view/> -->
</div>
</template>

<script>
import Index from './components/Index'

export default {
name: 'App',
components: {
Index
}
}
</script>

具体改动如图:

浏览器访问项目,可以看到首页变成了Index组件中的内容:

引入 element-ui 组件

element-ui 官网:https://element.eleme.cn/#/zh-CN

停止项目,安装element-ui依赖:

1
npm i element-ui -S

安装成功之后,检查package.json配置中是否引入了element-ui

main.js配置中引入element-ui组件:

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体改动如图:

Index.vue组件进行改造,引入 element-ui 的 Container 布局容器:

Container 布局容器:https://element.eleme.cn/#/zh-CN/component/container

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
<template>
<div>
<el-container>
<el-aside width="200px">{{left}}</el-aside>
<el-container>
<el-header>{{header}}</el-header>
<el-main>{{main}}</el-main>
</el-container>
</el-container>
</div>
</template>

<script>

export default {
name: 'Index',
data () {
return {
left: 'this is left aside',
header: 'this is header',
main: 'this is main'
}
}
}
</script>

<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

具体改动如图:

浏览器访问项目,可以看到首页变成了Index组件中的 element-ui 布局样式:

引入 element-ui 导航菜单

NavMenu 导航菜单:https://element.eleme.cn/#/zh-CN/component/menu

Index.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
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>{{header}}</el-header>
<el-main>{{main}}</el-main>
</el-container>
</el-container>
</div>
</template>

<script>

export default {
name: 'Index',
data () {
return {
left: 'this is left aside',
header: 'this is header',
main: 'this is main'
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>

<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

具体改动如下:

添加导航菜单效果如图:

设置 element-ui 导航菜单动态路由

步骤1:开始导航菜单路由模式

Index.vue组件中,将菜单<el-menu>标签属性中设置开启使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转,并且在<el-main>标签中增加<router-view/>路由组件:

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
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:default-active="$route.path"
router>
<el-menu-item index="/linkMgt">
<i class="el-icon-s-grid"></i>
<span slot="title">链接管理</span>
</el-menu-item>
<el-menu-item index="/systemConfig">
<i class="el-icon-s-tools"></i>
<span slot="title">系统配置</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>{{header}}</el-header>
<el-main><router-view/></el-main>
</el-container>
</el-container>
</div>
</template>

具体改动如下:

步骤2:创建菜单对应的 vue 组件

创建菜单对应的 vue 组件:

SystemConfig.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h1>系统配置页面</h1>
</template>

<script>
export default {
name: "SystemConfig"
}
</script>

<style scoped>

</style>

LinkMgt.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<h1>链接管理页面</h1>
</template>

<script>
export default {
name: "LinkMgt"
}
</script>

<style scoped>

</style>

步骤3:配置路由

router/index.js配置中将路由与步骤 2 创建的组件关联:

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
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import LinkMgt from "@/components/LinkMgt";
import SystemConfig from "@/components/SystemConfig";

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
redirect:'LinkMgt',
component: Index
},
{
path: '/linkMgt',
name: 'LinkMgt',
component: LinkMgt
},
{
path: '/systemConfig',
name: 'SystemConfig',
component: SystemConfig
}

]
})

注意:

  • 上述配置中对 Router 对象加了mode: 'history',这样路由地址中就会去除 # 号。
  • 首页路由增加了redirect,访问首页直接重定向到/linkMgt

导航菜单支持动态路由效果如图:

引入 ECharts 组件

ECharts官网:https://echarts.apache.org/zh/index.html

步骤1:安装 ECharts

停止运行中的项目,在项目根据目录安装ECharts依赖:

1
npm install echarts --save

步骤2:将 ECharts 定义到 vue 的原型上

main.js配置文件中将 ECharts 定义到 vue 的原型上:

1
2
3
import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

具体改动如下:

步骤3:在组件中引入 ECharts 图表组件

LinkMgt.vue组件中引入ECharts图表组件:

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
<template>
<div ref="myEcharts" style="width: 600px;height:400px;"></div>
</template>

<script>
export default {
mounted() {
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myEcharts);
// 绘制图表
let option;
option = {
title: {
text: 'ECharts demo'
},
xAxis: {
data: ["Java", "C", "C++", "Python", "Go", "Ruby"]
},
yAxis: {},
series: [{
name: '熟练度',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
}
</script>

<style scoped>

</style>

引入 Echarts 效果如图:

引入 element-ui 动态表格

步骤1:安装 mock 服务

使用 npm 安装json-server服务:

官网地址:https://github.com/typicode/json-server

1
npm install -g json-server

在一个空目录中创建db.json文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"tableData": {
"code": "0",
"msg": "success",
"data": [{
"date": "2017-05-22",
"name": "张三",
"address": "上海市普陀区"
}, {
"date": "2018-11-11",
"name": "李四",
"address": "北京市朝阳区"
}, {
"date": "2019-10-06",
"name": "王五",
"address": "广东省深圳市"
}]
}
}

db.json文件所在目录执行命令,启动 mock 服务:

1
json-server --watch db.json

json-server服务启动成功如图:

浏览器访问http://localhost:3000即可看到`db.json`配置中的 mock 接口:

点击上图中的tableData接口可以看到响应成功的 json 报文:

步骤2:引入axios依赖

停止项目运行,在项目根目录下执行安装命令:

1
npm install axios --save

main.js配置文件中将 axios 定义到 vue 的原型上:

1
2
3
import axios from 'axios';

Vue.prototype.$axios = axios;

具体改动如下:

步骤3:引入动态表格组件

Table 表格:https://element.eleme.cn/#/zh-CN/component/table

SystemConfig.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
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>

<script>
export default {
name: "SystemConfig",
data() {
return {
tableData: null
}
},
mounted() {
this.getTableData();
},
methods: {
getTableData() {
this.$axios.get('http://localhost:3000/tableData')
.then(resp => {
this.tableData = resp.data.data;
})
.catch(error => {
console.log(error)
});
}
}
}
</script>

<style scoped>
</style>

由于<el-main>包裹表格导致表格的表头异常高,可以在Index.vue中将.el-main样式中的line-height样式删除:

整个页面与浏览器边界有“留白”,可以在App.vue中增加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

具体改动如下:

引入动态表格效果如下:

updated updated 2024-01-01 2024-01-01
本文结束感谢阅读

本文标题:Vue + Element UI快速入门

本文作者:woodwhales

原始链接:https://woodwhales.cn/2022/03/31/086/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%