02_ElementUI - 技术栈

一.前端工程化

1.1 概述

前端工程化是使用软件工程的方法来单独解决前端的开发流程

中模块化、组件化、规范化、自动化的问题,其主要目的为了

提高效率和降低成本。

1.2 NodeJS的安装

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环

境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以

方便地开发服务器端应用程序，如 Web 应用、API、后端服

务，还可以通过 Node.js 构建命令行工具等

打开官网https://nodejs.org/en下载对应操作系统的 LTS

版本。

双击安装包：

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

1.3 npm 配置和使用

NPM全称Node Package Manager，是Node.js包管理工具，

是全球最大的模块生态系统，里面所有的模块都是开源免费

的；也是Node.js的包管理工具，相当于后端的Maven 。

安装node，自动安装npm包管理工具！

*配置全局依赖下载后存储位置

创建一个新的全局依赖存储目录，例如

D:\develop\GlobalNodeModules

打开命令行终端，执行以下命令来配置新的全局依赖存储

路径：

npm config set prefix "D:\develop\GlobalNodeModules"

确认配置已生效，可以使用以下命令查看当前的全局依赖

存储路径：

npm config get prefix

切换npm的淘宝镜像，使用管理员身份运行命令行，在命

令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com

确认配置已生效，可以使用以下命令查看当前 registry 的配置：

npm config get registry

1.4 Vue-cli安装：

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成

的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了

如下功能：

*统一的目录结构

*本地调试

*热部署

*单元测试

*集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程

化依赖的环境。所以我们需要先安装NodeJS，然后才能安装

Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

二.Vue项目介绍

通过cmd命令先进入到图形化界面，然后再进行vue工程的创建

进入后输入指令

vue ui

选择创建按钮创建项目，如下图所示

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界

面，如下图所示：

2.2 vue项目目录结构介绍

通过VS Code打开之前创建的vue文件夹，打开之后，呈现

如下图所示页面：

vue项目的标准目录结构以及目录对应的解释如下图所示:

public/ 目录：用于存放一些公共资源，如 HTML 文件、图

像、字体等，这些资源会被直接复制到构建出的目标目录

中

src/ 目录：存放项目的源代码，包括 JavaScript、CSS、

Vue 组件、图像和字体等资源。在开发过程中，这些文件

会被 Vite 实时编译和处理，并在浏览器中进行实时预览和

调试。以下是src内部划分建议：

assets/目录：用于存放一些项目中用到的静态资源，如

图片、字体、样式文件等。

components/ 目录：用于存放组件相关的文件。组件

是代码复用的一种方式，用于抽象出一个可复用的 UI

部件，方便在不同的场景中进行重复使用。

router/ 目录：用于存放 Vue.js 的路由配置文件，负责

管理视图和 URL 之间的映射关系，方便实现页面之间

的跳转和数据传递

vue.config.js 文件：Vite 的配置文件，可以通过该文件配

置项目的参数、插件、打包优化等。该文件可以使用

CommonJS 或 ES6 模块的语法进行配置。

package.json 文件：标准的 Node.js 项目配置文件，包含

了项目的基本信息和依赖关系。其中可以通过 scripts 字段

定义几个命令，如 dev、build、serve 等，用于启动开

发、构建和启动本地服务器等操作。

2.3 运行vue项目

第一种方式：通过VS Code提供的图形化界面，如下图所示：

点击之后，我们等待片刻，即可运行，在终端界面中，我们发

现项目是运行在本地服务的8080端口，我们直接通过浏览器

打开地址

最终浏览器打开后，呈现如下界面，表示项目运行成功

对于8080端口，经常被占用，所以我们可以去修改默认的

8080端口。我们修改vue.config.js文件的内容，添加如下代

码：

javascript 复制代码

module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port: 9000
}
})

第二种方式：命令行方式

直接基于cmd命令窗口，在vue目录下，执行输入命令npm

run serve即可，如下图所示：

补充：NPM脚本窗口调试出来

第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，

如下图所示

然后重启VS Code，并且双击打开package.json文件 ，然后

点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

然后就能都显示NPM脚本小窗口了。

2.4 Vue项目开发流程

那么我们访问的首页是index.html，但是我们找到

public/index.html文件，打开之后发现，里面没有什么代

码，但是能够呈现内容丰富的首页：如下图所示：

对于vue项目，index.html文件默认是引入了入口函数main.js

文件，我们找到src/main.js文件，其代码如下：

javascript 复制代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

import: 导入指定文件，并且重新起名。例如上述代码

import App from ./App.vue'导入当前目录下得App.vue并

且起名为App

new Vue(): 创建vue对象

$mount('#app');将vue对象创建的dom对象挂在到id=app

的这个标签区域中，作用和之前学习的vue对象的le属性一

致。

router: 路由，详细在后面的小节讲解

render: 主要使用视图的渲染的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区

域，但是我们还是没有解决最开始的问题：首页内容如何呈现

的？这就涉及到render中的App了，如下图所示：

那么这个App对象怎么回事呢，我们打开App.vue,注意的

是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

template: 模板部分，主要是HTML代码，用来展示页面主

体结构的

script: js代码区域，主要是通过js代码来控制模板的数据来

源和行为的

style: css样式部分，主要通过css样式控制模板的页面效果

得

接下来我们可以简化模板部分内容，添加script部分的数据模

型，删除css样式，完整代码

javascript 复制代码

<template>
<div>
{{username}}
</div>
</template>
<script>
export default {
data() {
return {
username:"zhangsan"
}
},
methods: {
},
}
</script>
<style>
</style>

保存直接，回到浏览器，我们发现首页展示效果发生了变化，

如下图所示：

三.Vue组件库Element

3.1 Element介绍

不知道同学们还否记得我们之前讲解的前端开发模式MVVM，

我们之前学习的vue是侧重于VM开发的，主要用于数据绑定

到视图的，那么接下来我们学习的ElementUI就是一款侧重于

V开发的前端框架，主要用于开发美观的页面的。

Element：是饿了么公司前端开发团队提供的一套基于 Vue

的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例

如超链接、按钮、图片、表格等等。如下图所示就是我们开

发的页面和ElementUI提供的效果对比：可以发现ElementUI

提供的各式各样好看的按钮

ElementUI的学习方式和我们之前的学习方式不太一样，对于

ElementUI，我们作为一个后台开发者，只需要学会如何从

ElementUI的官网拷贝组件到我们自己的页面中，并且做一

些修改即可。其官网地址：https://element.eleme.cn/#/zh-

CN，我们主要学习的是ElementUI中提供的常用组件，至于

其他组件同学们可以通过我们这几个组件的学习掌握到

ElementUI的学习技巧，然后课后自行学习。

3.2 快速入门

安装ElementUI组件库（在当前工程的目录下），在命令行

执行指令：

具体操作如下图所示：

引入ElementUI组件库

javascript 复制代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

具体操作如图所示：

然后我们需要按照vue项目的开发规范，在src/views目录下

创建一个vue组件文件，注意组件名称后缀是.vue，并且在组

件文件中编写之前介绍过的基本组件语法，代码如下：

javascript 复制代码

<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

具体操作如图所示：

最后我们只需要去ElementUI的官网，找到组件库，然后找到

按钮组件，抄写代码即可，具体操作如下图所示：

然后找到按钮的代码，如下图所示：

紧接着我们复制组件代码到我们的vue组件文件中，操作如下

图所示：

最后，我们需要在默认访问的根组件src/App.vue中引入我们

自定义的组件，具体操作步骤如下：

然后App.vue组件中的具体代码如下，代码是我们通过上述步
骤引入element-view组件时自动生成的。

javascript 复制代码

<template>
<div id="app">
<!-- {{message}} -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from
'./views/Element/ElementView.vue'
export default {
components: { ElementView },
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>

然后运行我们的vue项目，浏览器直接访问之前的9000端口，

展示效果如下图所示：

到此，我们ElementUI的入门程序编写成功

3.3 Table表格

3.3.1 组件演示

Table 表格：用于展示多条结构类似的数据，可对数据进行排

序、筛选、对比或其他自定义操作。

首先我们需要来到ElementUI的组件库中，找到表格组件，如

下图所示：

然后复制代码到我们之前的ElementVue.vue组件中，需要注

意的是，我们组件包括了3个部分，如果官方有除了template

部分之外的style和script都需要复制。具体操作如下图所示：
template模板部分：

script脚本部分

ElementView.vue组件文件整体代码如下：

javascript 复制代码

<template>
<div>
<!-- Button按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<!-- Table表格 -->
<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>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style>
</style>

此时回到浏览器，我们页面呈现如下效果：

3.3.2 组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢？主

要通过如下几个属性：

data: 主要定义table组件的数据模型

prop: 定义列的数据应该绑定data中定义的具体的数据模

型

label: 定义列的标题

width: 定义列的宽度

其具体示例含义如下图所示

PS:Element组件的所有属性都可以在组件页面的最下方找

到，如下图所示：

3.4 Pagination分页

3.4.1 组件演示

Pagination: 分页组件，主要提供分页工具条相关功能。其展

示效果图下图所示：

首先在官网找到分页组件，我们选择带背景色分页组件，如下

图所示：

然后复制代码到我们的ElementView.vue组件文件的

template中，拷贝如下代码

javascript 复制代码

<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>

浏览器打开呈现如下效果：

3.4.2 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性（可以通过

查阅官网组件中最下面的组件属性详细说明得到）：

*background: 添加背景颜色，也就是上图蓝色背景色效

果。

*layout: 分页工具条的布局，其具体值包含 sizes , prev ,

pager , next , jumper , -> , total , slot 这些值

*total: 数据的总数量

然后根据官方分页组件提供的layout属性说明，如下图所示：

我们修改layout属性如下：

浏览器打开呈现如下效果：

layout="sizes,prev, pager, next,jumper,total"

3.4.3 组件事件详解

对于分页组件，除了上述几个属性，还有2个非常重要的事件

我们需要去学习：

* size-change ： pageSize 改变时会触发

* current-change ：currentPage 改变时会触发

其官方详细解释含义如下图所示：

对于这2个事件的参考代码，我们同样可以通过官方提供的完

整案例中找到，如下图所示：

然后我们找到对应的代码，首先复制事件，复制代码如下：

此时Panigation组件的template完整代码如下：

javascript 复制代码

<!-- Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="sizes,prev, pager,next,jumper,total"
:total="1000">
</el-pagination>

紧接着需要复制事件需要的2个函数，需要注意methods属性

和data同级，其代码如下：

javascript 复制代码

methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},

此时Panigation组件的script部分完整代码如下：

javascript 复制代码

<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>

回到浏览器中，我们f12打开开发者控制台，然后切换当前页

码和切换每页显示的数量，呈现如下效果：