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 registry1.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文件的内容，添加如下代
码：
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文件，其代码如下：
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样式，完整代码
<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组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
具体操作如图所示：
然后我们需要按照vue项目的开发规范，在src/views目录下
创建一个vue组件文件，注意组件名称后缀是.vue，并且在组
件文件中编写之前介绍过的基本组件语法，代码如下：
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>具体操作如图所示：
最后我们只需要去ElementUI的官网，找到组件库，然后找到
按钮组件，抄写代码即可，具体操作如下图所示：
然后找到按钮的代码，如下图所示：
紧接着我们复制组件代码到我们的vue组件文件中，操作如下
图所示：
最后，我们需要在默认访问的根组件src/App.vue中引入我们
自定义的组件，具体操作步骤如下：
然后App.vue组件中的具体代码如下，代码是我们通过上述步
骤引入element-view组件时自动生成的。
<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组件文件整体代码如下：
<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中，拷贝如下代码
<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完整代码如下：
<!-- Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="sizes,prev, pager,next,jumper,total"
:total="1000">
</el-pagination>紧接着需要复制事件需要的2个函数，需要注意methods属性
和data同级，其代码如下：
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},此时Panigation组件的script部分完整代码如下：
<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打开开发者控制台，然后切换当前页
码和切换每页显示的数量，呈现如下效果：
原文地址：https://blog.csdn.net/2401_85217463/article/details/143621571
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！