【学习总结|DAY036】Vue工程化+ElementPlus

引言

在前端开发领域，Vue 作为一款流行的 JavaScript 框架，结合 ElementPlus 组件库，为开发者提供了强大的构建用户界面的能力。本文将结合学习内容，详细介绍 Vue 工程化开发流程以及 ElementPlus 的使用，助力开发者快速上手并应用到实际项目中，且会包含丰富的代码案例以便更好地理解和实践。

一、Vue 基础与工程化

（一）Vue 框架概述

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架，它不仅是一个框架，还拥有丰富的生态。其核心功能包括声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Pinia、Vuex）等，官方网站为开发者提供了全面的文档支持（https://cn.vuejs.org/） 。

（二）Vue 工程化概念

前端工程化旨在企业级项目开发中，将前端开发所需的工具、技术、流程和经验进行规范化、标准化，涵盖模块化、组件化、规范化和自动化等方面。Vue 工程化则是基于 Vue 框架实现这些特性，提升开发效率、代码复用性和可维护性。

（三）Vue 工程化环境搭建与项目创建

  1. 环境准备：使用 Vue 官方提供的脚手架工具 create-vue，需要先安装 NodeJS（一个免费、开源、跨平台的 JavaScript 运行时环境），并通过其软件包管理器 npm 进行后续操作。
  2. 创建项目：执行npm create vue@3.3.4命令，根据提示设置项目名称、是否添加 TypeScript、JSX 支持、Vue Router、Pinia、测试工具（Vitest、Cypress）以及 ESLint 代码质量检查等功能。例如，创建一个名为my - vue - project的项目，不添加 TypeScript、JSX 支持，添加 Vue Router 和 Pinia：
C:\Users\YourUsername\Desktop>npm create vue@3.3.4
npx create - vue
Vue.js - The Progressive JavaScript Framework
Project name:...my - vue - project
Add TypeScript?... No
Add JSX Support? ...No
Add Vue Router for Single Page Application development?...Yes
Add Pinia for state management?... Yes
Add Vitest for Unit Testing?...No
Add Cypress for both Unit and End - to - End testing?... No
Add ESLint for code quality?...No
Scaffolding project in C:\Users\YourUsername\Desktop\my - vue - project...
Done. Now run:
cd my - vue - project
npm install
npm run dev

  1. 安装依赖与启动项目：进入项目目录，执行npm install安装项目依赖，再通过npm run dev启动项目，在浏览器中访问http://localhost:5173即可查看项目。

（四）Vue 项目开发流程与结构

  1. 项目结构剖析：Vue 项目包含.vscode（开发工具配置）、node_modules（第三方包）、public（静态资源）、src（源代码）等目录。其中，src目录下的main.js是入口文件，负责创建 Vue 应用实例；App.vue是根组件，.vue文件为单文件组件，将组件的逻辑（JS）、模板（HTML）和样式（CSS）封装在一起。
  2. 开发流程梳理：开发过程中，在单文件组件中编写代码。例如，在App.vue中，<script setup>部分定义数据和方法，<template>部分生成 HTML 结构，<style scoped>部分定义组件的 CSS 样式。以下是一个简单的App.vue示例：
<template><div><h1>{{ message }}</h1><button @click="increment">点击计数: {{ count }}</button></div>
</template><script setup>
import { ref } from 'vue';const message = ref('欢迎来到Vue项目');
const count = ref(0);const increment = () => {count.value++;
};
</script><style scoped>
h1 {color: blue;
}
</style>

（五）Vue API 风格

Vue 组件有选项式 API 和组合式 API 两种风格。

  1. 选项式 API：通过包含data、methods、mounted等选项的对象描述组件逻辑，这些选项定义的属性可通过this指向当前组件实例访问。示例代码如下：
<template><button @click="increment">count:{{ count }}</button>
</template><script>
export default {data() {return {count: 0};},methods: {increment() {this.count++;}},mounted() {console.log('Vue mounted...');}
};
</script>

  1. 组合式 API：Vue3 引入的基于函数的组件编写方式，使用ref()创建响应式变量，onMounted()注册组件挂载后的回调函数，setup标识开启组合式 API 的简洁使用方式，且在组合式 API 中this为undefined。示例代码如下：
<template><button @click="increment">count:{{ count }}</button>
</template><script setup>
import { ref, onMounted } from 'vue';const count = ref(0);const increment = () => {count.value++;
};onMounted(() => {console.log('Vue Mounted...');
});
</script>

二、ElementPlus 组件库

（一）ElementPlus 简介

ElementPlus 是饿了么团队基于 Vue 3 研发的组件库，提供了丰富的组件，如按钮、表单、表格等，官网为https://element-plus.org/zh-CN/#/zh-CN 。

（二）ElementPlus 快速入门

  1. 安装与引入：在项目目录下执行npm install element-plus@2.4.4 --save安装组件库，在main.js中引入 ElementPlus 及其样式：
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';const app = createApp(App);
app.use(ElementPlus).mount('#app');

  1. 组件使用：访问 ElementPlus 官方文档，复制所需组件代码并根据项目需求调整。例如，使用按钮组件：
<template><el - button type="primary">主要按钮</el - button><el - button type="success">成功按钮</el - button>
</template><script setup>
// 无需额外导入，直接使用ElementPlus组件
</script>

（三）ElementPlus 常见组件

  1. 表格组件：用于展示多条结构类似的数据，使用时需明确绑定的数据data和每列展示的属性信息。以下是一个结合异步数据获取的表格示例：
<template><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>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const tableData = ref([]);const fetchData = async () => {try {const response = await axios.get('https://example.com/api/data');tableData.value = response.data;} catch (error) {console.error('数据获取失败:', error);}
};onMounted(() => {fetchData();
});
</script>

  1. 分页条组件：当数据量过多时进行分页操作，可配置属性和事件，如需使用中文，可引入中文语言包进行配置。示例代码如下：
<template><div><el - pagination:total="total":page - size="pageSize":current - page="currentPage"@current - change="handleCurrentChange"layout="prev, pager, next"></el - pagination></div>
</template><script setup>
import { ref } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import App from './App.vue';const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).mount('#app');const total = ref(400);
const pageSize = ref(10);
const currentPage = ref(1);const handleCurrentChange = (page) => {currentPage.value = page;// 在此处可根据当前页码重新请求数据
};
</script>

  1. 对话框组件：在保留页面状态下告知用户并承载相关操作，通过model-value/v-model绑定的布尔值控制显示与隐藏。示例代码如下：
<template><div><el - button @click="dialogVisible = true">打开对话框</el - button><el - dialog v - model="dialogVisible" title="提示"><p>这是一个对话框内容</p><template #footer><el - button @click="dialogVisible = false">关闭</el - button></template></el - dialog></div>
</template><script setup>
import { ref } from 'vue';const dialogVisible = ref(false);
</script>

  1. 表单组件：包含输入框、单选框等多种输入组件，用于收集、验证和提交数据，关键在于表单项布局、数据采集（v-model绑定）和数据提交（事件绑定）。示例代码如下：
<template><el - form ref="formRef" :model="formData" label - width="80px"><el - form - item label="活动名称"><el - input v - model="formData.activityName"></el - input></el - form - item><el - form - item label="活动区域"><el - select v - model="formData.activityZone"><el - option label="区域一" value="zone1"></el - option><el - option label="区域二" value="zone2"></el - option></el - select></el - form - item><el - form - item><el - button type="primary" @click="submitForm">提交</el - button><el - button @click="resetForm">重置</el - button></el - form - item></el - form>
</template><script setup>
import { ref } from 'vue';const formRef = ref();
const formData = ref({activityName: '',activityZone: ''
});const submitForm = () => {formRef.value.validate((valid) => {if (valid) {console.log('表单提交成功', formData.value);} else {console.log('表单验证失败');}});
};const resetForm = () => {formRef.value.resetFields();
};
</script>

三、实战案例

（一）Vue 项目中数据渲染案例

在 Vue 项目中基于组合式 API 完成用户列表数据渲染。首先安装axios依赖用于发起异步请求，在组件中引入相关函数和axios，定义响应式变量和请求方法，在onMounted钩子函数中触发请求获取数据并渲染。示例代码如下：

<template><table border="1" cellspacing="0" width="60%"><thead><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr></thead><tbody><tr v - for="(user, index) in userList" :key="index"><td>{{ index + 1 }}</td><td>{{ user.name }}</td><td>{{ user.age }}</td><td><span v - if="user.gender === 1">男</span><span v - if="user.gender === 2">女</span></td><td>{{ user.score }}</td><td><span v - if="user.score >= 85">优秀</span><span v - else - if="user.score >= 60">及格</span><span style="color: red;" v - else>不及格</span></td></tr></tbody></table>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const userList = ref([]);const fetchUsers = async () => {try {const response = await axios.get('https://web-server.itheima.net/emps/list');userList.value = response.data.data;} catch (error) {console.error('用户数据获取失败:', error);}
};onMounted(() => {fetchUsers();
});
</script>

（二）ElementPlus 综合案例

利用 ElementPlus 制作包含查询、表单、表格等元素的页面，并异步获取数据展示。结合 ElementPlus 组件的使用方法，通过配置和代码编写实现页面功能。示例代码如下：

<template><div><el - form :model="queryForm" label - width="80px" class="query - form"><el - form - item label="姓名"><el - input v - model="queryForm.name"></el - input></el - form - item><el - form - item label="性别"><el - select v - model="queryForm.gender"><el - option label="全部" value=""></el - option><el - option label="男" value="1"></el - option><el - option label="女" value="2"></el - option></el - select></el - form - item><el - form - item><el - button type="primary" @click="searchUsers">查询</el - button><el - button @click="resetQuery">清空</el - button></el - form - item></el - form><el - table :data="userList" style="width: 100%"><el - table - column prop="name" label="姓名" width="180"></el - table - column><el - table - column prop="gender" label="性别" width="80"><template #default="scope"><span v - if="scope.row.gender === 1">男</span><span v - if="scope.row.gender === 2">女</span></template></el - table - column><el - table - column prop="job" label="职位" width="180"></el - table - column><el - table - column prop="hireDate" label="入职日期" width="180"></el - table - column><el - table - column prop="updateDate" label="更新时间" width="180"></el - table - column></el - table></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';const queryForm = ref({name: '',gender: ''
});
const userList = ref([]);const searchUsers = async () => {try {const response = await axios.get(`https://web-server.itheima.net/emps/list?name=${queryForm.value.name}&gender=${queryForm.value.gender}`);userList.value = response.data.data;} catch (error) {console.error('用户数据查询失败:', error);}
};const resetQuery = () => {queryForm.value.name = '';queryForm.value.gender = '';searchUsers();
};onMounted(() => {searchUsers();
});
</script><style scoped>
.query - form {margin - bottom: 20px;
}
</style>

四、总结

Vue 工程化开发与 ElementPlus 组件库的结合，为前端开发者提供了高效的开发方式。通过规范化的项目结构、灵活的 API 风格以及丰富的组件库，开发者能够快速构建出功能强大、用户体验良好的前端应用。在实际开发中，不断深入学习和实践，将这些技术运用到更多项目中，提升自己的前端开发能力。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LM Studio 部署本地大语言模型

LM Studio 部署本地大语言模型

一、下载安装 1.搜索&#xff1a;lm studio LM Studio - Discover, download, and run local LLMs 2.下载 3.安装 4.更改成中文 二、下载模型(软件内下载) 1.选择使用代理&#xff0c;否则无法下载 2.更改模型下载目录 默认下载位置 C:\Users\用户名\.lmstudio\models 3.搜…
阅读更多...
处理Spring MVC 中的跨域问题

处理Spring MVC 中的跨域问题

在 Spring MVC 中&#xff0c;跨域问题指的是浏览器从一个域名的网页去请求另一个域名的资源时&#xff0c;由于浏览器的同源策略而受到限制。同源策略要求浏览器在访问资源时&#xff0c;协议、域名和端口都必须相同&#xff0c;否则会产生跨域问题。以下是几种常见的处理 Spr…
阅读更多...
基于知乎平台的“开源AI智能名片2 + 1链动模式S2B2C商城小程序”引流策略研究

基于知乎平台的“开源AI智能名片2 + 1链动模式S2B2C商城小程序”引流策略研究

摘要&#xff1a;本文聚焦于如何借助知乎平台的高权重及优质用户特性&#xff0c;对“开源AI智能名片2 1链动模式S2B2C商城小程序”进行有效引流。通过深入分析知乎平台的用户特点、引流规则&#xff0c;并结合具体的引流方法&#xff0c;旨在为相关项目在知乎平台实现高效用户…
阅读更多...
Oracle CDB自动处理表空间不足脚本

Oracle CDB自动处理表空间不足脚本

之前我曾经发过一个自动处理表空间的脚本&#xff0c;可以通过定时任务自动处理表空间不足的问题&#xff1b;但是之前那个脚本没有涵盖CDB模式下的PDB&#xff0c;这里将脚本做了一下更新&#xff0c;可以处理CDB模式下多PDB的表空间问题。 传统模式的脚本请参考这个链接 Or…
阅读更多...
在 Navicat 17 中扩展 PostgreSQL 数据类型 | 创建自定义域

在 Navicat 17 中扩展 PostgreSQL 数据类型 | 创建自定义域

定义域 以适当的格式存储数据可以确保数据完整性&#xff0c;防止错误&#xff0c;优化性能&#xff0c;并通过实施验证规则和支持高效数据管理来维护系统间的一致性。基于这些原因&#xff0c;顶级关系数据库&#xff08;如PostgreSQL&#xff09;提供了多种数据类型。此外&a…
阅读更多...
CentOS 环境下 Docker、Jenkins、GitLab 和 Kubernetes 安装与配置

CentOS 环境下 Docker、Jenkins、GitLab 和 Kubernetes 安装与配置

以下是针对 CentOS 系统的安装和配置步骤&#xff0c;涵盖 Docker、Jenkins、GitLab 和 Kubernetes (K8s)&#xff0c;以及 CI/CD 流程的配置。通过这些步骤&#xff0c;可以搭建一个企业级 DevOps 环境。 1. 安装和配置 Docker 1.1 安装 Docker&#xff08;CentOS 示例&…
阅读更多...
细说机器学习数学优化之梯度下降

细说机器学习数学优化之梯度下降

系列文章目录 第一章&#xff1a;Python 机器学习数学优化之梯度下降 目录 系列文章目录 前言 一、基本原理&#xff1a; 二、使用步骤: 三、梯度下降类型&#xff1a; 四、应用场景&#xff1a; 总结 前言 梯度下降&#xff08;Gradient Descent&#xff09;是人工…
阅读更多...
Postgresql的三种备份方式_postgresql备份

Postgresql的三种备份方式_postgresql备份

这种方式可以在数据库正在使用的时候进行完整一致的备份&#xff0c;并不阻塞其它用户对数据库的访问。它会产生一个脚本文件&#xff0c;里面包含备份开始时&#xff0c;已创建的各种数据库对象的SQL语句和每个表中的数据。可以使用数据库提供的工具pg_dumpall和pg_dump来进行…
阅读更多...
青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用

青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用

青少年编程与数学 02-008 Pyhon语言编程基础 22课题、类的定义和使用 一、类类的定义和使用示例 二、定义1. 类定义语法2. 属性和方法3. 构造器和初始化4. 实例化5. 类变量和实例变量6. 类方法和静态方法7. 继承8. 多态总结 三、使用1. 创建类的实例2. 访问属性3. 调用方法4. 修…
阅读更多...
[Collection与数据结构] B树与B+树

[Collection与数据结构] B树与B+树

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

【基于SprintBoot+Mybatis+Mysql】电脑商城项目之修改密码和个人资料

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【Spring篇】【计算机网络】【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 目录 &#x1f383;1.修改密码 -持久…
阅读更多...
蓝桥杯小白打卡第二天

蓝桥杯小白打卡第二天

789. 数的范围 题目描述 给定一个按照升序排列的长度为 n n n 的整数数组&#xff0c;以及 q q q 个查询。 对于每个查询&#xff0c;返回一个元素 k k k 的起始位置和终止位置&#xff08;位置从 0 0 0 开始计数&#xff09;。 如果数组中不存在该元素&#xff0c;则返…
阅读更多...
Vue WebSocket简单应用 ws

Vue WebSocket简单应用 ws

webSocket应用 <template><div></div> </template><script> import { getToken } from "/utils/auth"; export default {data() {return {url: "",Socket: null, //socket对象lockReconnect: false, //锁定拒绝重连close: …
阅读更多...
【Elasticsearch】terms聚合误差问题

【Elasticsearch】terms聚合误差问题

Elasticsearch中的聚合查询在某些情况下确实可能存在误差&#xff0c;尤其是在处理分布式数据和大量唯一值时。这种误差主要来源于以下几个方面&#xff1a; 1.分片数据的局部性 Elasticsearch的索引通常被分成多个分片&#xff0c;每个分片独立地计算聚合结果。由于数据在分…
阅读更多...
电脑可以自己换显卡吗？怎么操作

电脑可以自己换显卡吗？怎么操作

电脑是否可以自己换显卡主要取决于电脑的类型&#xff08;台式机或笔记本&#xff09;以及电脑的硬件配置。以下是对这一问题的详细解答及操作步骤&#xff1a; 一、判断电脑是否支持更换显卡 台式机&#xff1a;大多数台式电脑都支持更换显卡。只要主板上有PCIe插槽&#xff…
阅读更多...
element-plus+vue3前端如何根据name进行搜索查到符合条件的数据

element-plus+vue3前端如何根据name进行搜索查到符合条件的数据

界面如图&#xff0c;下面的区域是接口给的所有的&#xff0c;希望前端根据输入的内容自己去匹配。 我是使用的element-plusvue3ts的写法。 <el-input v-model"filters.region" placeholder"输入区域搜索" keyup"filterRegion(filters.region)&q…
阅读更多...
从离散傅里叶变换（DFT）到快速傅里叶变换（FFT）

从离散傅里叶变换（DFT）到快速傅里叶变换（FFT）

摘要 离散傅里叶变换&#xff08;DFT&#xff09;是数字信号处理领域中分析信号频域特性的重要工具&#xff0c;但直接计算DFT的复杂度较高&#xff0c;限制了其在大规模数据处理中的应用。快速傅里叶变换&#xff08;FFT&#xff09;的出现显著降低了计算复杂度&#xff0c;极…
阅读更多...
Oracle常用响应文件介绍（19c）

Oracle常用响应文件介绍（19c）

文章目录 1. 数据库安装响应文件1.1 响应文件模板1.2 参数说明1.2.1 响应文件版本参数1.2.2 安装选项参数1.2.3 Unix 用户组参数1.2.4 软件清单参数1.2.5 安装目录参数1.2.6 安装版本参数1.2.7 特权操作权限组指定参数1.2.8 Root脚本执行配置参数1.2.9 Grid选项配置参数1.2.10 …
阅读更多...
【3分钟极速部署】在本地快速部署deepseek

【3分钟极速部署】在本地快速部署deepseek

第一步&#xff0c;找到网站&#xff0c;下载&#xff1a; 首先找到Ollama &#xff0c; 根据自己的电脑下载对应的版本 。 我个人用的是Windows 我就先尝试用Windows版本了 &#xff0c;文件不是很大&#xff0c;下载也比较的快 第二部就是安装了 &#xff1a; 安装完成后提示…
阅读更多...
基于Typescript，使用Vite构建融合Vue.js的Babylon.js开发环境

基于Typescript，使用Vite构建融合Vue.js的Babylon.js开发环境

一、创建Vite项目 使用Vite初始化一个VueTypeScript项目&#xff1a; npm create vitelatest my-babylon-app -- --template vue-ts cd my-babylon-app npm create vitelatest my-babylon-app -- --template vue-ts 命令用于快速创建一个基于 Vite 的 Vue TypeScript 项目。…
阅读更多...
最新文章

Copyright @ 2022~2023