1.Vue
Vue是一款用于构建用户界面的渐进式的JavaScript框架
特点：
模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成
环境准备：
create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目
create-vue提供了如下功能：
统一的目录结构 本地调试 热部署 单元测试 集成打包上线
依赖环境：NodeJS（需要安装）
npm：是NodeJS的软件包管理器
在开发前端项目的过程中，需要相关的依赖可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地
2.Vue项目构建
创建一个工程化的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
注：执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具
项目创建完成以后，进入vue-project01 项目目录，执行命令安装当前项目的依赖：npm install
项目结构：
打开VS Code
上述的目录中，以后操作的最多的目录是src目录，需要在这个目录下来编写前端代码
启动项目：
方式一：
命令行：npm run dev
方式二：
图形化界面：点击NPM脚本中的dev后的运行按钮
启动后访问前端的Vue项目
3.Vue项目开发流程
*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件
Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里
4.API风格
Vue的组件有两种不同的风格：（两种）
组合式API：
是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件
选项式API：
可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例
注：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined
5.ElementPlus
提供的一套基于 Vue3 的网站组件库，用于快速构建网页
只需学会如何从 ElementPlus 的官网拷贝组件到我们自己的页面中，并且做一些修改即可
快速入门：
准备工作：
-
将资料中提供的基础工程，解压到工作目录中，使用VSCode将其打开
-
安装ElementPlus的组件库（在当前工程的目录下），执行如下命令：
npm install element-plus@2.4.4 --save
- 在main.js 中引入ElementPlus组件库 （参照官方文档）
制作组件：
-
访问ElementPlus的官方文档，查看对应的组件源代码
-
在 src下创建
views目录，在views目录下，创建Element.vue组件文件，复制组件代码，调整成自己想要的
- 在根组件
app.vue中引入Element.vue
- 启动项目，访问 http://localhost:5173
6.常见组件
表格组件：
用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作
- 首先来到 ElementPlus 的组件库中，找到表格组件
- 在
Element.vue组件中继续制作表格。组件中，需要注意的是，我们组件包括了3个部分，如果官方有除了<template>部分之外的<style>和<script>都需要复制
整体代码：
Table表格组件，属性说明：
data: 主要定义table组件的数据模型
prop: 定义列的数据应该绑定data中定义的具体的数据模型
label: 定义列的标题
width: 定义列的宽度
分页组件：
主要提供分页工具条相关功能
- 在官网找到分页组件，我们选择带背景色分页组件
- 复制代码到我们的
Element.vue组件文件的template中
在 <script> </script> 中拷贝：
整体代码：
分页组件属性：
background: 添加北京颜色，也就是上图蓝色背景色效果
layout: 分页工具条的布局，其具体值包含sizes, prev, pager, next, jumper, total 这些值
total: 数据的总数量
size-change ： pageSize 改变时会触发
current-change ：currentPage 改变时会触发
对话框组件：
-
在ElementPlus官方找到Dialog组件
-
复制如下代码到我们的组件文件
Element.vue的<template></template>模块
- 复制如下代码到我们的组件文件
Element.vue的<script></script>模块
整体代码：
Dialog对话框组件使用的关键点，就是控制其显示与隐藏。 通过 v-model 给定的boolean值，来控制Dialog的显示与隐藏
表单组件：
Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
-
在ElementPlus的官方找到对应的组件
-
复制如下代码到我们的组件文件
Element.vue的<template></template>模块
- 复制如下代码到我们的组件文件
Element.vue的<script></script>模块
表单组件使用的关键点：
表单项数据采集：v-model数据绑定
表单数据提交：事件绑定