当前位置： 首页 > news >正文

Web前端实战:Vue工程化+ElementPlus

news 2025/7/31 6:07:55

1.Vue工程化

在这里插入图片描述

1.1介绍

在这里插入图片描述

  • 模块化：将js和css等，做成一个个可复用模块
  • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  • 自动化：项目的构建，测试，部署全部都是自动完成

1.2环境准备

1.2.1 NodeJS安装

在这里插入图片描述
1). 验证NodeJS的环境变量
NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v
[图片]

2). 配置npm的全局安装路径
[图片]

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

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

注意：D:\develop\NodeJS 这个目录是NodeJS的安装目录 !!!

3). 切换为淘宝镜像，加速下载：

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

1.2.3npm介绍

  • npm：Node Package Manager，是NodeJS的软件包管理器。
    [图片]

在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。

1.3 Vue项目创建

1.3.1项目创建

创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4
[图片]
项目创建完成以后，进入vue-project01 项目目录，执行命令安装当前项目的依赖：npm install
[图片]

1.3.2项目结构

在这里插入图片描述

1.3.3启动项目

  • 方式一：命令行
    启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。
    [图片]

  • 方式二：Vscode图形化界面
    点击NPM脚本中的dev后的运行按钮，就可以启动项目。
    在这里插入图片描述

启动起来之后，我们就可以访问前端Vue项目了，访问路径：http://localhost:5173

1.4Vue项目开发流程

在这里插入图片描述

其中*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。
在这里插入图片描述

1.5 API风格

  • 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量function increment(){ //声明函数count.value++;
}onMounted(() => { //声明钩子函数console.log('Vue Mounted....'); 
})
</script><template><input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template><style scoped></style>
  • setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
  • ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
  • onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。
  • 选项式API
    选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。
<script>
export default{data() {return {count: 0}},methods: {increment: function(){this.count++}},mounted() {console.log('vue mounted.....');}
}
</script><template><input type="button" @click="increment">Api Demo1 Count :  {{ count }}
</template><style scoped></style>

在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

2.ElementPlus

2.1介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。
官方网站：https://element-plus.org/zh-CN/#/zh-CN

2.2快速入门

准备工作：
1). 将准备好的文件,使用VSCode将其打开。
[图片]

2). 参照官方文档，安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：

npm install element-plus@2.4.4 --save

[图片]

3). 在main.js 中引入ElementPlus组件库 （参照官方文档），最终 main.js 中代码如下：

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)app.mount('#app')

制作组件：
1） 访问ElementPlus的官方文档，查看对应的组件源代码。
[图片]

2). 在 src下创建 views 目录，在 views 目录下，创建Element.vue组件文件，复制组件代码，调整成自己想要的 。

<script setup></script><template><el-row class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></el-row>
</template><style scoped></style>

3). 在根组件 app.vue 中引入Element.vue

<script setup>
import Element from './views/Element.vue'
</script><template><Element></Element>
</template><style scoped></style>

4). 启动项目，访问 http://localhost:5173
在这里插入图片描述

2.3常见组件

2.3.1表格组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码:

<script setup>
const tableData = [{date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'},{date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles'}
]
</script><template><!-- Table表格 --><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="住址" /></el-table>
</template>

Table表格组件，属性说明：

  • data: 主要定义table组件的数据模型
  • prop: 定义列的数据应该绑定data中定义的具体的数据模型
  • label: 定义列的标题
  • width: 定义列的宽度

2.3.2分页条组件

在这里插入图片描述
在这里插入图片描述

默认情况下，ElementPlus的组件是英文的，如果希望使用中文语言，可以在 main.js 中做如下配置：

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn})

代码:

<script setup>
const currentPage4 = ref(1)
const pageSize4 = ref(10)const handleSizeChange = (val) => {console.log(`设置每页大小: ${val}`)
}
const handleCurrentChange = (val) => {console.log(`设置当前页: ${val}`)
}
</script><template><!-- pagination分页 --><el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[10, 20, 30, 40]"layout=" sizes, prev, pager, next, jumper,total":total="40"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</template>

Pagination 分页组件的属性如下：

  • background: 添加北京颜色，也就是上图蓝色背景色效果。
  • layout: 分页工具条的布局，其具体值包含sizes, prev, pager, next, jumper, total 这些值
  • total: 数据的总数量
  • size-change ： pageSize 改变时会触发
  • current-change ：currentPage 改变时会触发

2.3.3对话框组件

在这里插入图片描述
在这里插入图片描述

<script setup>
// Dialog对话框
const dialogTableVisible = ref(false)
</script><template><!-- Dialog对话框 --><el-button @click="dialogTableVisible = true">打开对话框</el-button><el-dialog v-model="dialogTableVisible" title="Shipping address"><el-table :data="tableData"><el-table-column property="date" label="Date" width="150" /><el-table-column property="name" label="Name" width="200" /><el-table-column property="address" label="Address" /></el-table></el-dialog>
</template>

Dialog对话框组件使用的关键点，就是控制其显示与隐藏。 通过 v-model 给定的boolean值，来控制Dialog的显示与隐藏。

2.3.4表单组件

在这里插入图片描述

<script setup>
import { ref } from 'vue'
// Form表单
const formInline = ref({user: '',region: '',date: '',
})
const onSubmit = () => {console.log('提交!')
}
</script><template><!-- Form 表单 --><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="formInline.user" placeholder="Approved by" clearable /></el-form-item><el-form-item label="性别"><el-select v-model="formInline.region" placeholder="Activity zone" clearable><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="日期"><el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button></el-form-item></el-form>
</template>
http://www.lryc.cn/news/604406.html

相关文章：

  • 《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——8. AI赋能(下)：在Qt中部署YOLOv8模型
  • 【CF】Day115——杂题 (构造 | 区间DP | 思维 + 贪心 | 图论 + 博弈论 | 构造 + 位运算 | 贪心 + 构造 | 计数DP)
  • 从0到1学PHP（七）：PHP 与 HTML 表单：实现数据交互
  • useRouteLeaveConfirm 路由离开确认弹窗 Hook
  • ECCV | 2024 | LocalMamba：具有窗口选择性扫描的视觉状态空间模型
  • 2019 年 NOI 最后一题题解
  • C语言数据结构（1）顺序表专题2.顺序表的应用
  • Mac下的Homebrew
  • Python 中使用 OpenCV 库来捕获摄像头视频流并在窗口中显示
  • 深入理解 Doris Compaction：提升查询性能的幕后功臣
  • webpack-性能优化
  • 破茧 JDBC：MyBatis 在 Spring Boot 中的轻量实践录
  • 2025年6月电子学会青少年软件编程（C语言）等级考试试卷（二级）
  • C++ 中 NULL 与 nullptr 有什么区别？
  • RAG实战指南 Day 29：RAG系统成本控制与规模化
  • WebRTC核心组件技术解析：架构、作用与协同机制
  • mangoDB面试题及详细答案 117道（071-095）
  • Python深度挖掘：openpyxl与pandas高效数据处理实战指南
  • APM32芯得 EP.27 | 告别IDE，为APM32F411打造轻量级命令行开发工作流
  • 微服务消息队列之——RabbitMQ
  • .NET 10 中的新增功能系列文章2——ASP.NET Core 中的新增功能
  • PostGIS安装与pg_dump/pg_restore排错
  • flutter 记录一个奇怪的问题
  • 在 Mac 上用 Vagrant 安装 K8s
  • InfluxDB 3 数据库命名与创建全攻略：规范、限制与实战指南
  • 《零基础入门AI：传统机器学习核心算法解析（KNN、模型调优与朴素贝叶斯）》
  • GaussDB 数据库架构师(十二) 数据库对象修改审计设置
  • Redis学习------缓存穿透
  • llama factory本地部署常见问题
  • Git版本控制器