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文件的内容，添加如下代
码：

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打开开发者控制台，然后切换当前页
码和切换每页显示的数量，呈现如下效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/9164.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

从无音响Windows 端到 有音响macOS 端实时音频传输播放

从无音响Windows 端到 有音响macOS 端实时音频传输播放

以下是从 Windows 端到 macOS 端传输音频的优化方案&#xff0c;基于上述链接中的思路进行调整&#xff1a; Windows 端操作 安装必要软件 安装 Python&#xff08;确保版本兼容且已正确配置环境变量&#xff09;。安装 PyAudio 库&#xff0c;可通过 pip install pyaudio 命令…
阅读更多...
SpringBoot实现的企业资产管理系统

SpringBoot实现的企业资产管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
建筑行业智慧知识库的搭建与运用

建筑行业智慧知识库的搭建与运用

一、引言 在建筑领域&#xff0c;知识管理是企业持续发展和提升竞争力的关键所在。智慧知识库的构建&#xff0c;不仅能够促进知识的有效传递与共享&#xff0c;还能为项目管理和决策提供有力支持。本文将重点探讨建筑行业智慧知识库构建的价值、实践路径以及需要注意的关键点…
阅读更多...
开源 - Ideal库 - 常用时间转换扩展方法（二）

开源 - Ideal库 - 常用时间转换扩展方法（二）

书接上回&#xff0c;我们继续来分享一些关于时间转换的常用扩展方法。 01、时间转日期时间 TimeOnly 该方式是把TimeOnly类型转为DateTime类型&#xff0c;其中日期部分使用系统当前日期&#xff0c;时间部分则使用TimeOnly&#xff0c;具体代码如下&#xff1a; //时间转日…
阅读更多...
29.7 编译运行，读取日志配置看图

29.7 编译运行，读取日志配置看图

本节重点介绍 : 编译运行&#xff0c;配置采集和大盘 编译二进制 打包后编译 go build -o log2metrics main.go修改配置文件 http_addr: 0.0.0.0:8087 log_level: INFOlog_strategy:- metric_name: log_var_log_messages_level_totalmetric_help: /var/log/messages中的日…
阅读更多...
国产化浪潮下，高科技企业如何选择合适的国产ftp软件方案？

国产化浪潮下，高科技企业如何选择合适的国产ftp软件方案？

高科技企业在数字化转型和创新发展中&#xff0c;数据资产扮演着越来越重要的角色。在研发过程中产生的实验数据、设计文档、测试结果等&#xff0c;专利、商标、版权之类的创新成果等&#xff0c;随着信息量急剧增加和安全威胁的复杂化&#xff0c;传统的FTP软件已经不能满足这…
阅读更多...
SQL EXISTS谓词

SQL EXISTS谓词

谓词时返回值为真值&#xff08;true、false或unknown&#xff09;的函数。EXISTS与其他谓词不同&#xff0c;它接受的参数是行的集合。 输入值为一行的谓词叫做“一阶谓词”&#xff08;例如>、<、 及 LIKE等&#xff09;&#xff1b;输入值为行的集合的谓词叫做“二阶…
阅读更多...
[产品管理-59]：项目组合中产品或项目的类型分类: 平台类、支持改进类、衍生类、突破类

[产品管理-59]：项目组合中产品或项目的类型分类: 平台类、支持改进类、衍生类、突破类

目录 一、概述 1、平台型项目&#xff1a;平台产品 2、支持性项目&#xff1a;现有产品的改进&#xff0c;还是现有产品&#xff0c;只不过性能、效率提升。 3、衍生型项目&#xff1a;衍生出来的新产品&#xff0c;不同于现有产品&#xff0c;但与现有产品有关联 4、突破…
阅读更多...
Jmeter的安装和使用

Jmeter的安装和使用

使用场景&#xff1a; 我们需要对某个接口进行压力测试&#xff0c;在多线程环境下&#xff0c;服务的抗压能力&#xff1b;还有就是关于分布式开发需要测试多线程环境下数据的唯一性。 解决方案: jmeter官网连接&#xff1a;Apache JMeter - Apache JMeter™ 下载安装包 配…
阅读更多...
一文学习Android中的Property

一文学习Android中的Property

在 Android 系统中&#xff0c;Property 是一种全局的键值对存储系统&#xff0c;允许不同组件和进程间以轻量级的方式进行数据传递。它主要用于系统配置、状态标识等场景&#xff0c;使得不同进程能够通过属性的设置或获取来通信。property 的核心特性是快速、高效&#xff0…
阅读更多...
aosp15系统窗口闪屏原生bug-dim图层相关-你会修改吗？

aosp15系统窗口闪屏原生bug-dim图层相关-你会修改吗？

背景 近期各个大厂已经开始准备aosp15的系统rom适配工作了&#xff0c;应该是想2025年初开发发布相关的新机型&#xff0c;所以慢慢的我们也要开始适应aosp15版本的相关问题的修改和研究哈。 近期就有相关学员朋友在做android15相关的dialog开发时候&#xff0c;发现了一个严…
阅读更多...
SCUI Admin + Laravel 整合

SCUI Admin + Laravel 整合

基于 Vue3 和 Element Plus 和 Laravel 整合开发 项目地址&#xff1a;持续更新 LaravelVueProject: laravel vue3 scui
阅读更多...
LeetCode 热题 100之 堆

LeetCode 热题 100之 堆

1.数组中第k个最大元素 和Acwing 786 第k个数一模一样 排序 思路分析1&#xff1a;此题要求时间复杂度未为O(n)。虽然库函数sort和快速排序都能过&#xff0c;但是时间复杂度不满足条件。下面优化快速排序&#xff0c;写一个快速选择算法。我们可以引入随机化来加速这个过程&…
阅读更多...
使用SpringBoot+Vue+Echarts制作一个文章贡献度表

使用SpringBoot+Vue+Echarts制作一个文章贡献度表

使用SpringBootVueEcharts制作一个文章贡献度表 制作博客贡献表 使用了ECharts中的 calendar-effectscatter 组件制作贡献表&#xff1a;点我传送 首先附上完整的vue代码&#xff1a; <template><div id"container" style" width: 100%; height: 30…
阅读更多...
使用Matlab建立决策树

使用Matlab建立决策树

综述 除了神经网络模型以外&#xff0c;树模型及基于树的集成学习模型是较为常用的效果较好的预测模型。我们以下先构建一个决策树模型。 决策树算法的优点如下&#xff1a;1、 决策树易于理解和实现&#xff0c;用户在学习过程中不需要了解过多的背景知识&#xff0c;其能够…
阅读更多...
LangGPT结构化提示词编写实践

LangGPT结构化提示词编写实践

基础任务 如果直接询问大模型strawberry有几个r&#xff0c;大模型会给出错误的答案&#xff1a; 这里我们引入思维连Chain of Thought&#xff0c;我们让大模型遍历一遍单词&#xff0c;每次累加得到最终结果 之前怎么都做不对的题&#xff0c;让大模型一步一步思考&#xf…
阅读更多...
开源ISP（Infinite-ISP）介绍

开源ISP（Infinite-ISP）介绍

ISP&#xff08;Image Signal Processor&#xff09;我介绍了很多了&#xff0c;大家可以先看下面的文章&#xff0c;了解基本概念&#xff1a; ISP算法及架构分析介绍 谈谈FPGA工程师如何做ISP 图像信号处理器和 Infinite-ISP ISP从图像传感器获取 RAW 像素&#xff0c;并将其…
阅读更多...
如何在c++侧编译运行一个aclnn（AOL）算子？

如何在c++侧编译运行一个aclnn（AOL）算子？

1 AOL算子库 CANN&#xff08;Compute Architecture for Neural Networks&#xff09;提供了算子加速库&#xff08;Ascend Operator Library&#xff0c;简称AOL&#xff09;。该库提供了一系列丰富且深度优化过的高性能算子API&#xff0c;更亲和昇腾AI处理器&#xff0c;调…
阅读更多...
三分钟学会Docker基本操作，快速入门容器技术！

三分钟学会Docker基本操作，快速入门容器技术！

如果您时常遭遇以下困境&#xff1a; 被繁琐的应用安装依赖与环境配置耗尽了宝贵时间与精力&#xff1f; 即便严格遵循安装指南&#xff0c;仍频遇障碍&#xff0c;导致应用无法启动&#xff0c;让您倍感挫败与焦虑&#xff1f; 向研发团队反馈安装难题&#xff0c;却只换来“…
阅读更多...
快速入门Zookeeper

快速入门Zookeeper

Zookeeper ZooKeeper作为一个强大的开源分布式协调服务&#xff0c;扮演着分布式系统中至关重要的角色。它提供了一个中心化的服务&#xff0c;用于维护配置信息、命名、提供分布式同步以及提供组服务等。通过其高性能和可靠的特性&#xff0c;ZooKeeper能够确保在复杂的分布式…
阅读更多...
最新文章

Copyright @ 2022~2023