Vue.js 基础教程笔记(一):Vue入门与环境搭建

Vue.js 基础教程笔记(一):Vue入门与环境搭建

1. Vue.js 简介

1.1 什么是 Vue.js

Vue.js(通常简称为 Vue)是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

Vue 由 Evan You(尤雨溪)于 2014 年创建,最初是作为 Angular.js 的轻量级替代方案。经过多年的发展,Vue 已经成为前端开发领域最受欢迎的框架之一,拥有庞大的社区支持和丰富的生态系统。

1.2 Vue 的发展历史

  • 2014年2月:Evan You 在 GitHub 上发布了 Vue.js 的第一个版本(0.6.0)
  • 2015年10月:Vue.js 1.0.0 正式发布,引入了组件系统和虚拟 DOM
  • 2016年10月:Vue.js 2.0.0 发布,采用 Virtual DOM 架构,性能大幅提升
  • 2019年2月:Vue.js 3.0.0 进入 alpha 阶段
  • 2020年9月:Vue.js 3.0.0 正式发布,引入 Composition API 和 TypeScript 支持
  • 2022年2月 :Vue.js 3.2.0 发布,引入 <script setup> 语法糖,简化开发体验

1.3 Vue 的特点和优势

Vue 之所以能够在前端开发领域占据重要地位,与其独特的特点和优势密不可分:

1.3.1 渐进式框架

Vue 被设计为渐进式框架,这意味着你可以根据项目需求逐步采用其功能。你可以:

  • 只使用 Vue 的核心库来增强简单的页面
  • 结合 Vue Router 实现路由管理
  • 使用 Vuex/Pinia 进行状态管理
  • 集成 Vue CLI/Vite 等构建工具

这种渐进式的设计使得 Vue 既适合小型项目的快速开发,也能够胜任大型复杂应用的构建。

1.3.2 响应式数据绑定

Vue 最显著的特点之一是其响应式数据绑定系统。通过使用简洁的模板语法,你可以将 DOM 与 Vue 实例的数据轻松关联起来:

vue 复制代码
<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="编辑我">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

message 的值发生变化时,页面上的内容会自动更新,无需手动操作 DOM。

1.3.3 组件化开发

Vue 鼓励使用组件化的方式构建用户界面。组件是可复用的 Vue 实例,拥有自己的模板、逻辑和样式。通过组件化,你可以将复杂的界面拆分为独立、可维护的小部件:

vue 复制代码
<!-- 定义一个组件 -->
<template>
  <div class="todo-item">
    <input type="checkbox" v-model="todo.completed">
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
  </div>
</template>

<script>
export default {
  props: ['todo']
}
</script>

<style scoped>
.todo-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

组件化开发带来了诸多好处,包括代码复用、维护性提升、团队协作效率提高等。

1.3.4 虚拟 DOM

Vue 2.0 引入了虚拟 DOM 技术,这是一种将真实 DOM 抽象为内存中的 JavaScript 对象的技术。当数据发生变化时,Vue 会先在虚拟 DOM 中进行计算,找出最小的变更量,然后只更新需要修改的真实 DOM 节点。

虚拟 DOM 技术带来了显著的性能提升,尤其是在大型应用中,避免了频繁的 DOM 操作导致的性能问题。

1.3.5 易于学习

Vue 的 API 设计简洁明了,学习曲线平缓。如果你有 HTML、CSS 和 JavaScript 的基础,很快就能上手 Vue 开发。Vue 的官方文档也非常完善,提供了详细的教程和示例。

1.4 Vue 与其他框架的对比

在前端开发领域,Vue 经常与 React 和 Angular 进行比较。以下是它们之间的主要区别:

1.4.1 Vue vs React
特性 Vue React
模板语法 支持 HTML 模板和 JSX 主要使用 JSX
状态管理 Vuex/Pinia(官方推荐) Redux/MobX(社区主导)
路由 Vue Router(官方) React Router(社区)
学习曲线 较平缓 中等
性能 优秀 优秀
生态系统 成熟 非常成熟
1.4.2 Vue vs Angular
特性 Vue Angular
语言 JavaScript/TypeScript 主要使用 TypeScript
复杂度 较低 较高
学习曲线 平缓 陡峭
体积 较小 较大
灵活性 中等
适合项目 中小型到大型 大型企业应用

选择哪个框架取决于项目需求、团队技能和个人偏好。Vue 以其简洁的 API、良好的性能和渐进式设计,成为许多开发者的首选。

2. Vue 开发环境搭建

要开始 Vue 开发,你需要搭建一个合适的开发环境。本节将详细介绍环境搭建的步骤。

2.1 安装 Node.js

Vue 项目依赖 Node.js 环境,因此首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,允许在服务器端运行 JavaScript。

2.1.1 下载 Node.js

访问 Node.js 官方网站(https://nodejs.org/)下载适合你操作系统的安装包。推荐下载 LTS(长期支持)版本,它提供了更好的稳定性和安全性。

2.1.2 安装 Node.js

根据你的操作系统,按照安装向导完成安装:

  • Windows:双击下载的 .msi 文件,按照提示完成安装
  • macOS:双击下载的 .pkg 文件,按照提示完成安装
  • Linux:可以使用包管理器(如 apt、yum 等)安装,也可以下载源码编译安装
2.1.3 验证安装

安装完成后,打开命令行工具(Windows 下为 CMD 或 PowerShell,macOS/Linux 下为 Terminal),输入以下命令验证安装是否成功:

bash 复制代码
node -v
npm -v

如果安装成功,你将看到类似以下的输出:

复制代码
v20.10.0
10.2.3

2.2 选择包管理器

Node.js 安装完成后,会自动安装 npm(Node Package Manager)。npm 是 Node.js 的包管理器,用于安装、管理和分享 JavaScript 包。

除了 npm,还有其他流行的包管理器可供选择:

2.2.1 Yarn

Yarn 是由 Facebook 开发的包管理器,提供了更快的安装速度和更可靠的依赖管理。你可以使用 npm 安装 Yarn:

bash 复制代码
npm install -g yarn

验证安装:

bash 复制代码
yarn -v
2.2.2 pnpm

pnpm 是一个快速、节省磁盘空间的包管理器,使用符号链接来共享依赖,减少重复安装。你可以使用 npm 安装 pnpm:

bash 复制代码
npm install -g pnpm

验证安装:

bash 复制代码
pnpm -v

在本教程中,我们将主要使用 npm,但你可以根据个人偏好选择其他包管理器。

2.3 安装 Vue CLI

Vue CLI 是 Vue 官方提供的脚手架工具,用于快速创建 Vue 项目。它提供了项目初始化、插件管理、构建部署等功能。

2.3.1 安装 Vue CLI

使用 npm 全局安装 Vue CLI:

bash 复制代码
npm install -g @vue/cli

验证安装:

bash 复制代码
vue --version

如果安装成功,你将看到 Vue CLI 的版本号,例如:

复制代码
@vue/cli 5.0.8
2.3.2 Vue CLI 功能介绍

Vue CLI 提供了以下主要功能:

  • 项目创建:快速创建 Vue 项目,支持自定义配置
  • 插件系统:通过插件扩展功能,如 TypeScript、ESLint、Unit Testing 等
  • 开发服务器:提供热重载的开发服务器
  • 构建工具:将项目打包为生产环境可用的代码
  • 配置管理:集中管理项目配置

2.4 使用 Vite

Vite 是 Vue 团队开发的新一代前端构建工具,提供了极速的开发体验。与 Vue CLI 相比,Vite 具有更快的启动速度和热更新性能。

2.4.1 安装 Vite

Vite 不需要全局安装,你可以直接使用 npm create 命令创建 Vite 项目:

bash 复制代码
npm create vite@latest
2.4.2 Vite 的优势
  • 极速启动:利用浏览器的 ES 模块支持,无需打包即可快速启动开发服务器
  • 热模块替换(HMR):实时更新修改的组件,无需刷新页面
  • 按需编译:只编译当前需要的模块,提高开发效率
  • 优化的构建输出:使用 Rollup 进行生产构建,生成优化的代码

3. 创建第一个 Vue 项目

现在我们已经安装了必要的工具,接下来创建第一个 Vue 项目。我们将分别介绍使用 Vue CLI 和 Vite 创建项目的方法。

3.1 使用 Vue CLI 创建项目

3.1.1 初始化项目

打开命令行工具,进入你想要创建项目的目录,执行以下命令:

bash 复制代码
vue create hello-vue

这里的 "hello-vue" 是项目名称,你可以根据需要修改。

3.1.2 选择配置

执行命令后,Vue CLI 会提示你选择项目配置:

复制代码
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  • Default ([Vue 3]):使用 Vue 3 创建默认配置的项目,包含 Babel 和 ESLint
  • Default ([Vue 2]):使用 Vue 2 创建默认配置的项目,包含 Babel 和 ESLint
  • Manually select features:手动选择项目特性,自定义配置

对于初学者,推荐选择 "Default ([Vue 3])",然后按 Enter 键继续。

3.1.3 等待项目创建

Vue CLI 会自动下载依赖并创建项目结构。这个过程可能需要几分钟,取决于你的网络速度。

创建完成后,你会看到类似以下的输出:

复制代码
🎉  Successfully created project hello-vue.
👉  Get started with the following commands:

 $ cd hello-vue
 $ npm run serve
3.1.4 启动开发服务器

进入项目目录并启动开发服务器:

bash 复制代码
cd hello-vue
npm run serve

启动成功后,你会看到类似以下的输出:

复制代码
DONE  Compiled successfully in 2374ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.100:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

现在,你可以在浏览器中访问 http://localhost:8080/,看到你的第一个 Vue 应用。

3.2 使用 Vite 创建项目

3.2.1 初始化项目

执行以下命令创建 Vite 项目:

bash 复制代码
npm create vite@latest hello-vue3 -- --template vue

这里的 "hello-vue3" 是项目名称,"--template vue" 指定使用 Vue 模板。

如果你想使用 TypeScript,可以使用 vue-ts 模板:

bash 复制代码
npm create vite@latest hello-vue3-ts -- --template vue-ts
3.2.2 安装依赖

项目创建完成后,进入项目目录并安装依赖:

bash 复制代码
cd hello-vue3
npm install
3.2.3 启动开发服务器

安装完成后,启动开发服务器:

bash 复制代码
npm run dev

启动成功后,你会看到类似以下的输出:

复制代码
  VITE v5.0.11  ready in 386 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

在浏览器中访问 http://localhost:5173/,即可看到你的 Vue 应用。

4. Vue 项目结构解析

成功创建项目后,我们来解析一下 Vue 项目的基本结构。

4.1 Vue CLI 创建的项目结构

使用 Vue CLI 创建的项目结构如下:

复制代码
hello-vue/
├── node_modules/        # 项目依赖
├── public/              # 静态资源目录
│   ├── favicon.ico      # 网站图标
│   └── index.html       # HTML 入口文件
├── src/                 # 源代码目录
│   ├── assets/          # 资产目录(图片、样式等)
│   │   └── logo.png     # Vue logo
│   ├── components/      # 组件目录
│   │   └── HelloWorld.vue # 示例组件
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口文件
├── .gitignore           # Git 忽略文件配置
├── babel.config.js      # Babel 配置
├── package.json         # 项目配置和依赖
├── README.md            # 项目说明文档
└── yarn.lock            # Yarn 依赖锁定文件(如果使用 Yarn)

4.2 Vite 创建的项目结构

使用 Vite 创建的项目结构如下:

复制代码
hello-vue3/
├── node_modules/        # 项目依赖
├── public/              # 静态资源目录
│   └── vite.svg         # Vite logo
├── src/                 # 源代码目录
│   ├── assets/          # 资产目录
│   │   └── vue.svg      # Vue logo
│   ├── components/      # 组件目录
│   │   └── HelloWorld.vue # 示例组件
│   ├── App.vue          # 根组件
│   ├── main.js          # 应用入口文件
│   └── style.css        # 全局样式
├── .gitignore           # Git 忽略文件配置
├── index.html           # HTML 入口文件
├── package.json         # 项目配置和依赖
├── README.md            # 项目说明文档
├── vite.config.js       # Vite 配置
└── yarn.lock            # Yarn 依赖锁定文件(如果使用 Yarn)

4.3 核心文件说明

4.3.1 index.html

HTML 入口文件,所有 Vue 组件最终都会渲染到这个文件中:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

注意 Vite 项目中,index.html 位于根目录,而 Vue CLI 项目中位于 public 目录。

4.3.2 main.js

应用入口文件,负责创建 Vue 实例并挂载到 DOM 上:

javascript 复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
4.3.3 App.vue

根组件,是所有其他组件的父组件:

vue 复制代码
<template>
  <div>
    <img alt="Vue logo" src="./assets/vue.svg" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<style scoped>
img {
  height: 200px;
}
</style>

Vue 组件由三个部分组成:

  • <template>:组件的模板结构
  • <script>:组件的逻辑
  • <style>:组件的样式
4.3.4 HelloWorld.vue

示例组件,展示了 Vue 组件的基本结构:

vue 复制代码
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code>
    and save to test HMR
  </p>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<!-- scoped 表示样式只作用于当前组件 -->
<style scoped>
h1 {
  color: #42b883;
}
</style>

4.4 配置文件说明

4.4.1 package.json

项目配置和依赖管理文件:

json 复制代码
{
  "name": "hello-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.8"
  }
}

主要字段说明:

  • name:项目名称
  • version:项目版本
  • scripts:脚本命令(dev、build、preview 等)
  • dependencies:生产环境依赖
  • devDependencies:开发环境依赖
4.4.2 vite.config.js

Vite 配置文件:

javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})
4.4.3 babel.config.js(Vue CLI 项目)

Babel 配置文件,用于将 ES6+ 代码转换为兼容的 JavaScript:

javascript 复制代码
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

5. 第一个 Vue 应用:Hello World

现在我们来创建一个简单的 Hello World 应用,展示 Vue 的基本用法。

5.1 使用 CDN 引入 Vue

如果只是想快速体验 Vue,你可以使用 CDN 直接在 HTML 中引入 Vue:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Hello World</title>
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="编辑我">
  </div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

保存为 index.html 文件,然后在浏览器中打开,你会看到一个简单的 Vue 应用,输入框中的内容会实时反映到标题中。

5.2 应用结构解析

这个简单的应用包含以下几个部分:

  1. 引入 Vue:通过 CDN 引入 Vue 库
  2. 挂载点 :HTML 中的 <div id="app"></div> 是 Vue 应用的挂载点
  3. 模板 :挂载点内的内容是 Vue 的模板,使用双花括号 {``{ }} 绑定数据
  4. Vue 实例 :使用 createApp() 创建 Vue 应用实例
  5. 数据data() 函数返回应用的数据对象
  6. 挂载 :使用 mount('#app') 将 Vue 应用挂载到 DOM 上

5.3 基本语法演示

5.3.1 数据绑定
html 复制代码
<!-- 文本插值 -->
<h1>{{ message }}</h1>

<!-- 原始 HTML -->
<div v-html="rawHtml"></div>

<!-- 属性绑定 -->
<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

<!-- 双向绑定 -->
<input v-model="message">
5.3.2 条件渲染
html 复制代码
<!-- v-if -->
<div v-if="isShow">这是显示的内容</div>
<div v-else>这是隐藏时显示的内容</div>

<!-- v-show -->
<div v-show="isShow">这是显示的内容</div>
5.3.3 列表渲染
html 复制代码
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>
5.3.4 事件处理
html 复制代码
<!-- 基本事件处理 -->
<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>

<!-- 传递参数 -->
<button @click="handleClick('hello')">点击我</button>

这些是 Vue 的基本语法,我们将在后续笔记中详细介绍。

6. Vue 开发工具推荐

选择合适的开发工具可以极大地提高开发效率。以下是一些推荐的 Vue 开发工具。

6.1 VS Code

Visual Studio Code(VS Code)是目前最受欢迎的代码编辑器之一,具有丰富的插件生态系统和强大的功能。

6.1.1 安装 VS Code

访问 VS Code 官方网站(https://code.visualstudio.com/)下载并安装适合你操作系统的版本。

6.1.2 推荐插件
  • Volar:Vue 3 官方推荐的 VS Code 扩展,提供语法高亮、智能提示、代码格式化等功能
  • Vue VSCode Snippets:提供 Vue 代码片段,加快开发速度
  • ESLint:代码质量检查工具,帮助规范代码风格
  • Prettier:代码格式化工具,保持代码风格一致
  • GitLens:增强 Git 功能,方便查看代码提交历史

6.2 Vue DevTools

Vue DevTools 是 Vue 官方提供的浏览器扩展,用于调试 Vue 应用。

6.2.1 安装 Vue DevTools

Vue DevTools 支持 Chrome、Firefox 和 Edge 浏览器:

  • Chrome:在 Chrome Web Store 搜索 "Vue DevTools" 并安装
  • Firefox:在 Firefox Add-ons 搜索 "Vue DevTools" 并安装
  • Edge:在 Edge Add-ons 搜索 "Vue DevTools" 并安装
6.2.2 Vue DevTools 功能
  • 组件树:查看应用的组件结构
  • 数据检查:查看和修改组件的数据和 props
  • 事件追踪:监控组件触发的事件
  • 性能分析:分析组件的渲染性能
  • 路由管理:查看和管理路由(如果使用 Vue Router)

7. 常见问题与解决方案

在 Vue 开发过程中,可能会遇到一些常见问题。本节介绍一些常见问题及其解决方案。

7.1 环境安装问题

7.1.1 Node.js 安装失败

问题:安装 Node.js 时出现错误。

解决方案

  • 确保下载了与操作系统匹配的安装包
  • 关闭防病毒软件后重试
  • 使用管理员权限运行安装程序
  • 尝试安装其他版本的 Node.js
7.1.2 npm 命令无法使用

问题:安装 Node.js 后,npm 命令无法使用。

解决方案

  • 检查 Node.js 是否正确安装
  • 确保 Node.js 的安装目录已添加到系统环境变量
  • 重新启动命令行工具

7.2 项目创建错误

7.2.1 Vue CLI 创建项目失败

问题:使用 Vue CLI 创建项目时出现错误。

解决方案

  • 确保 Vue CLI 已正确安装
  • 检查网络连接是否正常
  • 尝试使用国内镜像:npm config set registry https://registry.npmmirror.com/
  • 清理 npm 缓存:npm cache clean --force
7.2.2 Vite 创建项目失败

问题:使用 Vite 创建项目时出现错误。

解决方案

  • 确保使用了最新版本的 Vite:npm create vite@latest
  • 检查网络连接
  • 尝试使用不同的模板

7.3 依赖安装失败

问题 :执行 npm install 时依赖安装失败。

解决方案

  • 检查网络连接
  • 使用国内镜像
  • 删除 node_modules 目录和 package-lock.json 文件,重新安装
  • 尝试使用其他包管理器(如 Yarn、pnpm)

7.4 开发服务器启动失败

问题 :执行 npm run servenpm run dev 时服务器启动失败。

解决方案

  • 检查端口是否被占用
  • 确保依赖已正确安装
  • 查看错误信息,根据提示解决问题
  • 尝试重启命令行工具

8. Vue 学习资源推荐

学习 Vue 有很多优质的资源,以下是一些推荐:

8.1 官方文档

8.2 在线课程

8.3 社区资源

8.4 书籍推荐

  • 《Vue.js 实战》
  • 《Vue.js 设计与实现》
  • 《深入浅出 Vue.js》
  • 《Vue.js 3 企业级应用开发》

9. 总结

本文介绍了 Vue.js 的基本概念、发展历史、特点以及开发环境的搭建方法。我们学习了如何使用 Vue CLI 和 Vite 创建 Vue 项目,解析了 Vue 项目的结构,并创建了第一个 Vue 应用。最后,我们推荐了一些 Vue 开发工具和学习资源。

通过本文的学习,你应该已经对 Vue.js 有了初步的了解,并能够搭建 Vue 开发环境,创建简单的 Vue 应用。在后续的笔记中,我们将深入学习 Vue 的模板语法、组件系统、响应式原理等核心内容。

Vue 是一个功能强大且易于学习的框架,掌握 Vue 开发将为你打开前端开发的大门。继续努力学习,你将能够构建出更加复杂和优秀的 Vue 应用。


相关推荐
weixin_446260852 小时前
解锁 React 开发新体验!Puck - 智能可视化编辑器
前端·react.js·编辑器
后来后来啊2 小时前
2026.1.18学习笔记
笔记·学习
hzb666662 小时前
xd_day28js原生开发-day31 day41asp.net
开发语言·前端·javascript·安全·web安全
wdfk_prog2 小时前
[Linux]学习笔记系列 -- [drivers][base]core
linux·笔记·学习
tan 912 小时前
KaliLinux2025.4 root用户修改显示语言
linux·服务器·前端·安全
小李子呢02112 小时前
Node.js
开发语言·前端·学习·node.js
渐雨朦胧眼2 小时前
网络安全之防御保护笔记
笔记·安全·web安全
心.c2 小时前
文件上传 - 入门篇
前端·javascript·vue.js·node.js·js
wgh6532 小时前
渗透测试笔记
笔记