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脚本部分

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打开开发者控制台,然后切换当前页

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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt