文章目录

最近学习了一段时间Vue,把文档看完之后有点懵懵懂懂,不过刚好赶上Element和iView等应用Vue编写的框架,就先看完文档,然后看了Element的源码,来巩固自己对Vue的见知。

在阅读本系列文章之前,希望你可以做到:

  1. 系统阅读一遍Vue文档;
  2. 系统查看一下Element的官方文档(本系列文章以Element 2.0.3版本做说明)

首先先说一下,直接从github上面得到的源码是无法编译的,我们可以用如下方法来运行:

在Element官方文档的快速上手里面,有为我们提供的项目模板,也就是下面的这个链接:https://github.com/ElementUI/element-starter

直接将其拷贝到本地,在你已经成功安装node.js和npm的情况下,直接:

1
npm install

或者是使用淘宝镜像直接:

1
cnpm install

推荐使用淘宝镜像,毕竟快。依赖安装完成之后,我们可以直接:

1
npm run dev

这个时候基本上就可以得到如下的目录结构:
目录结构
之后就可以直接将Element官方文档中的示例代码复制在App.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<el-container>
<el-header>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<div class="fl title">管理后台</div>
<div class="fr">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</div>
</el-menu>
</el-header>
<el-main>
<el-container>
<el-aside width="240px">
<el-row class="tac">
<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">
<i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</el-menu-item>
</el-menu>
</el-row>
</el-aside>
<el-container>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
<el-footer>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="100"
layout="total, prev, pager, next"
:total="1000">
</el-pagination>
</el-footer>
</el-container>
</el-container>
</el-main>
</el-container>
</template>

<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
activeIndex: '2-1',
tableData: Array(5).fill(item),
currentPage: 5,
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
}
</script>

<style>
.fl {
float: left;
}
.fr {
float: right;
}
.title {
width: 125px;
text-align: center;
line-height: 60px;
color: #fff;
}
</style>

就可以直接看到下面的界面:
界面
安装Vue官方提供的devtools有助于我们进行快速开发(只不过chrome商店由于访问等原因可能下载不到,不过我们可以使用Firefox的插件),而且还可以直接浏览器中查看插件直接数据/计算属性/方法等的计算结果,对插件内部的情况一目了然,如下图所示:
devtools

做好这些准备之后,下章我们来正式从Element融会贯通Vue的使用方法。

文章目录