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

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

news 2025/8/3 10:57:09

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.dtcms.com/a/305449.html

相关文章：

  • 前端兼容性问题全面解决方案
  • 重生之我在暑假学习微服务第五天《Docker部署项目篇》
  • JavaWeb 进阶：Vue.js 与 Spring Boot 全栈开发实战（Java 开发者视角）
  • Linux常用基础命令
  • 【MySQL基础01】：如何创建删除修改表和数据库
  • 【大语言模型入门】—— Transformer 如何工作：Transformer 架构的详细探索
  • [mcp: JSON-RPC 2.0 规范]
  • sqLite 数据库 (2)：如何复制一张表，事务，聚合函数，分组加过滤，列约束，多表查询，视图，触发器与日志管理，创建索引
  • Python的魔术方法
  • 在 Cloudflare 平台上完整部署 GitHub 项目 MoonTV 实现免费追剧流程
  • 计算机网络基础(一) --- (网络通信三要素)
  • Deep Learning_ Foundations and Concepts-Springer (2024)【拜读】20章3节
  • Linux C：构造数据类型
  • python基础：request请求Cookie保持登录状态
  • Python高效历史记录管理：保存最后N个元素的完整指南
  • 机械学习--线性回归
  • 项目如何进行阶段性评估？核心要点
  • Java07--面向对象
  • 【收银系统开发】收银系统之数字键盘，人机交互中重复判断——仙盟创梦IDE
  • thingsboard 自定义动作JS编程
  • 1768. 交替合并字符串
  • 2025年06月 C/C++（四级）真题解析#中国电子学会#全国青少年软件编程等级考试
  • 【C#学习Day13笔记】静态成员、接口、运算符重载和索引器
  • Redis 键值对操作详解：Python 实现指南
  • 【Dify】-进阶14- 用 Dify 搭建法律文档解析助手
  • 工作中使用git可能遇到的场景
  • docker docker、swarm 全流程执行
  • 抵御酒店管理系统收银终端篡改攻击 API 加密的好处及实现——仙盟创梦IDE
  • LLM中BLEU 指标、ROUGE 指标、PPL指标
  • MySQL图解索引篇