26.6.3Vue笔记

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 组件离不开的 defineComponent API

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()可以把变量变成响应式