第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 布局容器 | 用于布局的容器组件，方便快速搭建页面的基本结构。 |
更多操作请跳转：第3章 Vue2 + Element.md