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

Web开发系列-第13章 Vue3 + ElementPlus

news 2025/7/28 13:15:31

第13章 Vue3 + ElementPlus

Vue是一款用于构建用户界面的渐进式JavaScript框架。

（官方：Vue.js - 渐进式 JavaScript 框架 | Vue.js）

npm：如果我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了。

13.1 Vue工程化

13.1.1 Vue项目创建

1、创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4

详细步骤说明：

Project name：------------------》项目名称，默认值：vue-project，可输入想要的项目名称。
Add TypeScript? ----------------》是否加入TypeScript组件？默认值：No。
Add JSX Support? --------------》是否加入JSX支持？默认值：No。
Add Vue Router...--------------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia ...----------------------》是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest ...---------------------》是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End ...-----------》是否添加端到端测试？默认值No。
Add ESLint for code quality? ---》是否添加ESLint来进行代码质量检查？默认值：No。

2、安装当前项目的依赖：npm install

启动项目

方式一：命令行

启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。

方式二：Vscode图形化界面

点击NPM脚本中的dev后的运行按钮，就可以启动项目。

13.2 API风格

Vue的组件有两种不同的风格：组合式API 和 选项式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。

13.2 ElementPlus

13.2.1 介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。

官方网站：一个 Vue 3 UI 框架 | Element Plus

作为一个后台开发者，只需要学会如何从 ElementPlus 的官网拷贝组件到我们自己的页面中，并且做一些修改即可。

13.2.2 常用组件

常用组件如下表格：

组件	作用
Button按钮	常用的操作按钮。
Form 表单	由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。
Table 表格	展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
Pagination分页	当数据量过多时，使用分页分解数据。
Dialog 对话框	在保留当前页面状态的情况下，告知用户并承载相关操作。
Container 布局容器	用于布局的容器组件，方便快速搭建页面的基本结构。