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

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

ds 2025/8/1 17:29:00

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.xdnf.cn/news/16805.html

相关文章：

  • 二叉树算法之【二叉树的层序遍历】
  • 专题：2025机器人产业技术图谱与商业化指南|附130+份报告PDF、数据汇总下载
  • Python爬虫05_Requests肯德基餐厅位置爬取
  • 小架构step系列30：多个校验注解
  • 《Spring Security源码深度剖析：Filter链与权限控制模型》
  • 文件权限值的表示方法
  • 怎样在 Vue 中定义全局方法？
  • 【C语言】深度剖析指针（二）：指针与数组，字符，函数的深度关联
  • AWS VPC NAT 网关可观测最佳实践
  • 15、点云＜—＞深度图转换原理
  • 数据集：机器学习的基石
  • RPA软件推荐：提升企业自动化效率
  • 北京理工大学医工交叉教学实践分享（1）|如何以实践破解数据挖掘教学痛点
  • 在 Elasticsearch 8.19 和 9.1 中引入更强大、更具弹性和可观测性的 ES|QL
  • 《Vuejs设计与实现》第 12 章（组件实现原理 下）
  • 44、鸿蒙HarmonyOS Next开发：视频播放 (Video)组件和进度条 (Progress)组件的使用
  • OSS-服务端签名Web端直传+STS获取临时凭证+POST签名v4版本开发过程中的细节
  • webpack-性能优化
  • STM32CubeMX 生成时钟获取函数的分析
  • 【网络运维】 Linux：使用 Cockpit 管理服务器
  • 矩阵指数函数 e^A
  • 移动管家手机控车系统硬件安装与软件绑定设置
  • LeetCode 4：寻找两个正序数组的中位数
  • DISTILLM：迈向大型语言模型的简化蒸馏方法
  • 基于React+Express的前后端分离的个人相册管理系统
  • OpenBayes 一周速览丨Self Forcing 实现亚秒级延迟实时流视频生成；边缘AI新秀，LFM2-1.2B采用创新性架构超越传统模型
  • 爱车生活汽车GPS定位器：智能监控与安全驾驶的守护者
  • 云原生环境里的显示变革：Docker虚拟浏览器与cpolar穿透技术实战
  • 新零售“实—虚—合”逻辑下的技术赋能与模式革新：基于开源AI大模型、AI智能名片与S2B2C商城小程序源码的研究
  • RAG：检索增强生成的范式演进、技术突破与前沿挑战