一.vue是什么
首先vue是用于前端的JS框架，基于HTML、CSS、JS构建，提供一套声明式、组件化的变成模型，易于高效开发用户界面
渐进式框架
vue的设计在于非常高的灵活性和“可以逐步集成”的特点，根据需求不同，可以用不同方式使用
无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面
单文件组件
可以使用类似HTML格式的文件书写Vue组件，被称为单文件组件，也叫.vue文件
vue的单文件组件会将组件的模板（HTML)、样式(CSS)和逻辑(JavaScript)封装在一个文件里面
简单来说，就是直接给HTML、CSS、JavaScript一起打包，放到一个叫xxx.vue的文件里面
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<style scoped>
button {
font-weight: bold;
}
</style>就像上面这样，单文件组件时Vue的标志性功能
API风格
vue组件书写风格有两种，选项式API和组合式API
选项式API(Options API)
按照“类别”写，把 data、methods、computed、watch 分开写，定义的属性都会暴露在函数内部
这样写的好处是，可读性很高，一眼就能看到用了什么数据、什么方法
缺点是，如果组件太复杂，众多数据就会被拆解到data、methods、computed、watch四个位置，后续维护很麻烦
组合式API(Composition API)
按照“功能/逻辑”写，把一块功能需要的变量、方法放在一起用 setup( ) + 各种 ref、reactive、computed 来组织
这样写的好处在于，可以把一块逻辑单独抽成一个函数，方便其他组件再使用
如果是刚刚入手vue建议使用选项式API
二.Vue 3生态
核心：Vue 3、Vue Router
数据：Pinia
工程：Vite
界面：Element Plus / Ant Design Vue / 移动端库
应用级：Nuxt 3
工具：VueUse、Volar、ESLint
扩展：i18n、表单、请求管理
高级：测试、SSR、跨端
核心层
Vue 3核心
这部分是组件化的前端框架，包含了响应式系统、模板渲染、声明周期、API等等
可以让页面的数据变化到视图更新变得自动化（数据刚修改完就可以反应到页面上），可以通过组件达到界面的复用，通过响应式减少手动DOM操作
知识补充：响应式
vue的响应式是数据和DOM自动关联的机制：当响应式数据发生变化的时候，依赖他的DOM也会自动更新
Vue Router（官方路由）
vue router是官方的前端路由管理库，用于实现单页应用（SPA）的页面跳转与路由控制，达到不用刷新页面就可以切换视图的效果
它可以解决：SPA 只有一个 index.html，但要表现出“多页面”效果，就需要根据 URL 显示不同组件，这就是路由做的事。
可以做什么：
路由表配置：如/home，/user/id
嵌套路由
动态添加路由
路由首位（进入页面前做校验，就比如登录）
与浏览器的前进后退结合
知识补充：嵌套路由
嵌套路由是vue router中，路由的层级嵌套结构，对应组件的父子嵌套
就比如说后台管理页面/home下，可以嵌套/home/user用户管理页、/home/setting设置页，URL也会跟着呈现层级，让页面结构更清晰
状态管理层
Pinia
pinia是vue官方推荐的状态管理库，主要用在vue3（替代了旧的vuex）
用于集中管理vue应用中多个组件共享的数据，比如用户信息，购物车等等
他就像一个全局数据仓库，所有组件都可以直接存取和修改仓库数据，不用手动层层传props和乱用全局变量
Vuex（老版本用）
构建与工程
Vite
这个是vue的官方构建工具（但不仅限于vue）
特点：
开发用原生ES模块，启动快
内置对.vue的支持
配置简单、生态插件多
基本所有新的vue 3项目都会使用它作为脚手架和打包工具
Vue CLI
vue CLI是vue 2时代的官方脚手架
可以用于图形化配置、内置webpack和插件化
BU