6.3
【内容概要】
Vue Cli脚手架构建项目，
Babel：可以把ES6的新语法转换成es5以下的来适应低版本的浏览器
Linter 格式化构建工具，严格要求规范代码，多输入一个空格都会报错，但是一般大家都会选上
Vite构建工具：推荐
Vue-Cli：传统脚手架，基于Webpack vue create 你的项目
ts离不开Lint，代码检查的
Prettier
ESLint：查找js / ts代码问题并提供修复建议的工具
---------------------------笔记--------------------------
项目建议遵循Vue3的组合式API（Composition API）
在 Vue 3 ，使用 createApp 执行 Vue 的初始化，另外不管是 Vue 生态里的东西，还是外部插件、 UI 框架，统一都是由 use() 进行激活，非常统一和简洁：
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import pluginA from 'pluginA' import pluginB from 'pluginB' import pluginC from 'pluginC'
createApp(App) .use(store) .use(router) .use(pluginA) .use(pluginB) .use(pluginC) .mount('#app')
-
全新的
setup函数，关系到组件的生命周期和渲染等问题 -
写 TypeScript 组件离不开的
defineComponentAPI
setup 的含义
Vue 3 的 Composition API 系列里，推出了一个全新的 setup 函数，它是一个组件选项，在创建组件之前执行，一旦 props 被解析，便作为组合式 API 的入口点。
TIP
说的通俗一点，就是在使用 Vue 3 生命周期的情况下，整个组件相关的业务代码，都可以放在 setup 里执行。
因为在 setup 之后，其他的生命周期才会被启用（点击了解：组件的生命周期）。
import { createApp } from "vue"; // 1. 从Vue库拿来"创建应用"的工具
import App from "./App.vue"; // 2. 导入根组件（最外层积木）
import router from "./router"; // 3. 导入路由（管理页面跳转）
import Antd from "ant-design-vue"; // 4. 导入UI组件库（现成的好看积木）
import "ant-design-vue/dist/reset.css"; // 5. 组件库的样式
createApp(App) // 以 App.vue 为根，创建整个应用
.use(router) // 安装路由插件
.use(Antd) // 安装UI组件库插件
.mount("#app") // 把整个应用挂载到 HTML 里 id="app" 的那个 div 上App.vue 是所有积木的最外层容器。关键是这两个标签：
-
<router-link>--- 相当于<a>链接，但不会刷新页面，只切换内容 -
<router-view />--- 这是一个占位符，当用户访问不同路由，对应的页面组件就会显示在这里
约定俗成的目录分工：
| 目录 | 放什么 |
|---|---|
views/ |
页面级组件，对应一个路由，比如"首页"、"用户详情页" |
components/ |
可复用的小积木，比如"按钮"、"卡片"、"表单项" |
如何在一个组件里使用另一个组件？
看 HomeView.vue 是怎么使用 HelloWorld.vue 的：
<template>
<div class="home">
<!-- 3. 像普通 HTML 标签一样使用 -->
<hello-world msg="欢迎来到首页" />
</div>
</template>
<script setup lang="ts">
// 1. 导入组件
import HelloWorld from '@/components/HelloWorld.vue'
// 2. 用了 <script setup>，导入后不需要额外注册，直接在 template 用
</script>.vue 文件的三段式结构（必须记住）
每个 .vue 文件都由三段组成：
<template>
<!-- 这里写 HTML 结构 — "长什么样" -->
</template>
<script setup lang="ts">
// 这里写逻辑 — "怎么工作"
// setup 是 Vue 3 的写法，比 Vue 2 简洁很多
</script>
<style scoped>
/* 这里写 CSS 样式 — "什么颜色、什么布局" */
/* scoped 表示这个样式只作用于当前组件，不会影响其他组件 */
</style>index.html <div id="app">
↓ mount
main.ts → createApp → 装好所有插件
↓
App.vue → 导航栏 + <router-view>
↓ 根据 URL 决定显示哪个
views/XxxView.vue → 当前页面
↓ 页面里引用
components/XxxComp.vue → 可复用小积木地基一：什么是"响应式"？
普通 JS 变量改了，页面不会自动更新：
let count = 0
count = 1 // 页面：我不知道，我不管Vue 的响应式变量改了，页面自动重新渲染：
const count = ref(0)
count.value = 1 // 页面：我感知到了，我刷新！这就是响应式的核心------数据变 → 页面自动跟着变。
地基二：什么是"组合式 API / <script setup>"？
Vue 3 新写法，<script setup> 里写的变量和函数直接在模板里用 ，不用挂载到 data()、methods() 里了，比 Vue 2 简洁很多。
router.afterEach --- 路由钩子
// 第 38~40 行
router.afterEach((to) => {
current.value = [to.path]
})这是一个全局路由钩子 ，意思是：每次路由跳转完成之后，自动执行这个函数。
-
to= 跳转到的目标路由对象，to.path就是目标路径，比如"/user/login" -
把
to.path赋给current.value，菜单高亮就自动同步了
执行时机：
用户访问 /user/login
→ 路由跳转
→ afterEach 触发
→ current.value = ["/user/login"]
→ 菜单高亮 "用户登录"刷新页面也会触发，所以刷新后高亮也是对的。
刷新/跳转页面
↓
router.afterEach 触发
↓
current.value = [to.path] ← 改的是 ref 响应式变量
↓
a-menu 感知到 current 变化 ← v-model 双向绑定
↓
对应菜单项高亮显示ref()可以把变量变成响应式