一、简介

1、概述

• 官网
• GitHub - Vuejs

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

Vue.js作为一个渐进式框架，其设计理念是“自底向上”的增量开发。这意味着开发者可以从一个简单的视图层开始，逐步添加更多的功能和模块，最终构建一个完整的前端应用。其核心思想是让开发者能够根据项目的实际需求，灵活地选择和组合各种功能模块，从而提高开发效率和代码质量。

Vue的渐进式框架设计理念使得它在灵活性、模块化和逐步引入方面表现优异。这种设计不仅可以满足从小型项目到大型应用的各种需求，还能与现有的技术栈无缝集成。

2、Vue语法基础

（1）Vue语法基础教程

• Vue 官网教程
• B站尚硅谷教程，其课件代码

（2）一些理解不太透彻的概念

• 如何理解Vue的声明式渲染
• 理解和选择Vue的组件风格：组合式API与选项式API详解

（3）相关基础教程

• Node.js
• Webpack：建议看 B站尚硅谷教程 及其 在线课件
• Vite
• axios

3、Vue2 & Vue3

Vue 2和Vue 3是两个不同版本的Vue.js框架，它们之间存在多方面的区别。以下是对Vue 2和Vue 3主要区别的详细分析：

• 性能优化与响应式系统
  • Vue 2：使用Object.defineProperty()来实现数据响应式。这种方式在初始化时会递归遍历对象的所有属性，对于新增或删除属性无法直接进行响应式处理，需要调用特定方法（如Vue.set或this.$set）。在性能方面，对于大型复杂对象的处理可能不是最优的。
  • Vue 3：采用Proxy代理对象来实现响应式。Proxy可以直接代理整个对象，检测到对象属性的新增、删除等操作，性能上有一定提升，特别是在处理大型复杂对象时更为高效。此外，Vue 3还引入了静态提升和事件缓存等编译优化策略，进一步提升了性能。
• API设计
  • Vue 2：主要采用选项式API（Options API），将一个组件的逻辑（如data、methods、computed等）分散在不同的选项中。这种方式在小型组件中比较直观，但在大型组件中，代码的逻辑关联性可能会被分散，不利于维护和理解。
  • Vue 3：推出了组合式API（Composition API），通过setup函数将相关逻辑组合在一起。例如，可以将一个功能相关的响应式数据、计算属性、方法等都放在同一个setup函数内，使得代码的组织更加清晰，可复用性更强，尤其适合大型复杂组件的开发。同时，Vue 3也保留了选项式API，开发者可以根据需要选择使用。
• TypeScript支持
  • Vue 2：虽然可以使用TypeScript，但支持不够完善，类型推断和类型检查较弱。
  • Vue 3：从设计之初就考虑了TypeScript的集成，对TypeScript有更好的类型支持。在Vue 3中编写基于TypeScript的代码时，类型推断更加准确，代码的可维护性和可扩展性更好。
• 全局API与插件
  • Vue 2：有一些全局API，如Vue.nextTick、Vue.set等。创建Vue实例是通过new Vue()构造函数来实现的，通常是在main.js文件中直接创建应用实例，并将路由和状态管理作为选项传入。
  • Vue 3：对全局API进行了调整，将一些全局API改为实例方法或者进行了更合理的模块划分。例如，nextTick现在作为实例方法使用。Vue 3使用createApp函数来创建应用实例，这使得创建过程更加清晰。路由和状态管理通过use方法进行插件注册。
• 组件特性与内置功能
  • Vue 2：组件化是Vue 2的核心概念之一，它允许开发者将应用程序拆分为小的、独立的、可复用的组件。Vue 2没有类似Teleport这样专门用于解决特定问题的组件。
  • Vue 3：Vue 3新增了Teleport组件，它可以将一个组件的内容渲染到指定的DOM节点下，而不受组件层级关系的限制。这在一些需要将组件内容渲染到特定布局（如模态框需要渲染到body元素下）的场景中非常有用。此外，Vue 3还引入了Fragments和Suspense等内置功能，进一步丰富了组件的特性和使用场景。
• 状态管理与路由
  • Vue 2：使用Vuex进行状态管理，通过state、getters、mutations和actions组织状态。路由通过VueRouter插件进行管理，并在Vue实例中进行注册。
  • Vue 3：使用Pinia进行状态管理，它允许多个store模块，支持模块化的状态管理，更加灵活。Vue 3仍然使用Vue Router进行路由管理，但通过createRouter函数来创建路由实例，API更加现代化。

综上所述，Vue 3在性能优化、API设计、TypeScript支持、全局API与插件、组件特性与内置功能以及状态管理与路由等方面都进行了显著的改进和提升。这些改进使得Vue 3更加灵活、强大，适用于各种规模和复杂度的应用开发。

4、常用 Vue 生态

• 工具链
  • Vue CLI / Vite（项目脚手架）
  • Vue Devtools（调试工具）
• UI 框架
  • Element Plus / Vant / Ant Design Vue
• HTTP 请求
  • Axios + 拦截器封装
  • 与 Vue 集成的最佳实践
• SSR & 静态站点
  • Nuxt.js（服务端渲染框架）
  • Vitepress（文档生成）

二、快速入门

• 第一步，下载开发工具 Visual Studio Code
  • 软件下载地址：https://code.visualstudio.com/Download
  • 根据向导提示完成安装即可
• 第二步，安装 Node.js
  • 移步：Node.js
• 第三步，下载 Vue项目脚手架
  • 用 create-vite 来创建一个 Vue 项目：

    yarn create vite my-vue-app --template vue
    

    这个命令会安装和执行 create-vue，跟随命令行的提示继续操作即可。
  • 用 Vue CLI 来创建项目（Vue CLI Install）

    # 安装：
    # yarn global add @vue/cli
    npm install -g @vue/cli
    
    # 创建一个项目：
    # vue create my-project
    vue ui
    

三、 项目结构

以下是一个典型的 Vue.js 项目目录结构说明（基于 create-vue 创建的项目）:

my-vue-app/
├── node_modules/         # 项目依赖包（安装后生成）
├── public/               # 静态资源目录（直接复制到构建结果中）
│   └── vite.svg          # Vite 示例图标
├── src/                  # 项目源码目录
│   ├── assets/           # 资源文件（如图片、CSS、字体等）
│   │   └── vue.svg       # Vue 示例图标
│   ├── components/       # 可复用 Vue 组件
│   │   └── Hello.vue
│   ├── router/       	  # 路由配置（使用 Vue Router 时）
│   │   └── index.ts
│   ├── store/        	  # Vuex 状态管理（使用 Vuex 时）
│   │   └── index.ts
│   ├── views/        	  # 页面级组件
│   │   └── Home.vue
│   ├── App.vue           # 根组件（项目入口组件）
│   └── main.ts           # 应用入口文件（初始化 Vue 实例）
├── .gitignore            # Git 忽略规则（默认排除 node_modules/ 等）
├── index.html            # 主 HTML 文件（Vite 入口）
├── package.json          # 项目配置（依赖、脚本命令等）
├── vite.config.ts        # Vite 配置文件（已集成 Vue 插件）
└── README.md             # 项目说明文档


├── .browserslistrc     # 浏览器兼容配置
├── .editorconfig 		# 代码风格配置
├── .env 				# 环境变量配置
├── .eslintrc.js        # ESLint配置
├── .gitattributes		# Git文件管理配置
├── .gitignore        	# Git 忽略配置
├── env.d.ts 			# 定义全局类型声明
├── babel.config.js   	# Babel 配置
├── yarn.lock   		# 记录通过yarn命令下载到 node_modules 目录下的每一个包的下载信息
├── package-lock.json   # 记录通过npm 命令下载到 node_modules 目录下的每一个包的下载信息

1、package.json

package.json 用来记录与项目有关的一些配置信息。

{
  "name": "code",   		// 项目名称 
  "version": "1.0.0",		// 项目版本号
  "description": "",   		// 项目描述
  "main": "index.js",     	// 包的入口文件
  "scripts": {}				// 脚本
  "author": "",				// 作者
  "keywords": [],    		// 关键字
  "license": "ISC",  		// 开源许可协议
  "devDependencies": {}, 	// 开发依赖包
  "dependencies": {}		// 核心依赖包
}

dependencies & devDependencies

• 如果某些包只在项目开发阶段会用到，在项目上线之后不会用到，则建议把这些包记录到 devDependencies 节点中。
• 与之对应的，如果某些包在开发和项目上线之后都需要用到，则建议把这些包记录到 dependencies 节点中。

  # 安装指定的包，并记录到 devDependencies 节点中
  npm i 包名 -D
  
  # 注意：上述命令是简写形式，等价于下面完整的写法：
  npm install 包名 --save-dev
  

判断一个包是否在项目上线后会不会用到：https://www.npmjs.com/包名#install

2、vite.config.js & vue.config.js

• vite.config.js是Vite项目的配置文件。
• vue.config.js是Vue CLI项目的全局配置文件。

vite.config.js文件允许你自定义Vite项目的开发和打包过程，包括：

• base：基础公共路径。
• build：构建选项，如输出目录、资源目录、是否生成source map等。
• plugins：配置需要使用的插件列表。
• resolve：设置别名、导入时想要省略的扩展名列表等。
• server：开发服务器设置，如HTTPS、代理、CORS等。

3、node_modules & package-lock.json & yarn.lock

创建项目后，通常需要拉取依赖，会创建 node_modules 文件夹用于存放项目依赖包。导入第三方包时，就是从这个目录中查找并加载包。

用不同命令拉取依赖会生成不同的 lock文件，如 npm i 生成 package-lock.json，yarn生成 yarn.lock。lock 配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等。

程序员不要手动修改 node_modules 或 lock配置文件中的任何代码，包管理工具会自动维护它们。

多个第三方包体积较大，在协作开发时，一般不将第三方包上传至代码仓库。即将 node_modulus 文件夹，添加到 .gitignore 忽略文件中。

当我们拉代码时，需执行 npm install 来一次性安装所有的包。npm install 会先读取 package.json 中的 dependencies 节点，读取到新记录的所有依赖包名称和版本号之后，npm包管理工具把所有包安装。

公司项目有的时候会有自己开发的包，这类包一般存放在公司自己建的镜像仓库，所以在执行 npm install 前，需要修改镜像源。

项目包 & 全局包：

• 项目包：那些被安装到项目的 node_modules 目录中的包，都是项目包
• 全局包：在执行 npm install 命令时，如果提供了 -g 参数，则会把包安装为全局包。

只有工具性质的包，才有全局安装的必要性。因为它们提供了好用的终端命令。

4、env.d.ts

end.d.ts文件作用：

• 全局类型声明：用于声明全局类型，例如 import.meta.env 的类型。
• 模块增强：为一些特殊的模块（如 .svg、.json 等）提供模块声明。
• 类型提示支持：帮助 TypeScript 理解 Vite 的环境变量或自定义模块。

文件内容模版：

/// <reference types="vite/client" />
/// <reference types="vite-env" />

interface ImportMetaEnv {
  VITE_APP_TITLE: string;
  // more environment variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

上面的代码中，/// <reference types="vite/client" /> 和 /// <reference types="vite-env" /> 是告诉 TypeScript 编译器引入 vite/client 和 vite-env 的类型声明。这有助于在开发过程中获得更好的类型检查和智能提示。

然而，如果你将 /// <reference /> 注释掉，并且你的程序依然能够正常执行，那可能是因为你的代码并没有直接使用到这些类型声明，或者你的编辑器/IDE 仍然能够通过其他方式（比如 node_modules 中的类型声明文件）获取到相应的类型信息。但这并不意味着 /// <reference /> 指令本身没有作用，它对于确保类型安全和代码可维护性是很重要的。

需要注意的是，env.d.ts 文件本身并不包含实际的环境变量值，它只是定义了这些变量的类型。实际的环境变量值通常会在构建或运行时通过配置文件、命令行参数或其他方式注入到项目中。

5、.env

.env 文件是用于存储环境变量的配置文件，允许开发者根据不同的运行环境（如开发、测试、生产等）来设置不同的配置信息。

命名规则：

• .env：
  • 作用：.env 文件是全局默认的配置文件，适用于所有环境。它存储的是一些通用的、不随环境变化的配置信息。
  • 加载方式：Vue CLI 会自动加载 .env 文件中的配置信息，并在项目的任何位置通过 process.env 对象来访问这些变量。
  • 命名规则：.env 文件名固定，不能随意更改，否则 Vue CLI 可能无法正确读取。
• .env.local
  • 作用：.env.local 文件用于覆盖 .env 文件中的配置信息，适用于所有环境但具有更高的优先级。它通常用于存储一些本地开发环境特有的、不希望被版本控制的配置信息。
  • 加载方式：与 .env 文件类似，.env.local 文件中的配置信息也会被 Vue CLI 自动加载，并通过 process.env 对象访问。当 .env 和 .env.local 文件中有相同配置项时，.env.local 文件中的值会覆盖 .env 文件中的值。
• .env.[mode]
  • 存储特定于某个环境模式（mode）的环境变量，常见的包括 development（开发环境）、production（生产环境）和 test（测试环境）等。
  • Vue CLI 会根据当前运行的环境模式来加载对应的环境变量文件。
• .env.[mode].local

注意事项：

• .env、.env.local 文件名是固定的，不能随意更改。
• 环境变量的名称必须以 VUE_APP_ 为前缀，否则在客户端代码中无法访问（这是为了防止意外泄露敏感信息）。
• .env 和 .env.local 文件通常会被添加到 .gitignore 文件中，以避免将它们意外提交到版本控制系统中。特别是 .env.local 文件，因为它可能包含一些本地特有的、不希望被共享的配置信息。

6、babel.config.js

Babel是一个广泛使用的JavaScript编译器，它的主要作用是将使用ES6+语法编写的代码转换为向后兼容的ES5语法，以便在不支持新语法和特性的旧版浏览器或环境中运行。

babel.config.js 文件是Babel的配置文件，定义了Babel在转换代码时应遵循的规则和使用的插件。这些规则和插件决定了代码转换的方式，例如哪些ES6+特性需要被转换，以及如何使用特定的语法或功能。

babel.config.js文件通常包含presets（预设）和plugins（插件）的配置。

• Presets是一组插件的集合，用于支持特定的JavaScript版本或框架。例如，@vue/cli-plugin-babel是一个Vue CLI插件，它提供了一个Vue专用的Babel预设。
• Plugins用于实现特定的转换或功能，例如语法糖的支持、代码的压缩和优化等。

在Vue CLI创建的项目中，babel.config.js文件通常已经存在，并且预配置了Vue CLI所需的Babel设置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
};

babel.config.js文件与Webpack的关系：

• 在Vue.js项目中，Webpack是一个常用的模块打包工具，它负责将项目中的各个模块打包成最终的静态资源文件。
• Webpack配置中通常会包含Babel的配置，以便在打包过程中对JavaScript代码进行转换。
• babel.config.js文件就是Webpack配置中引用Babel配置的地方。

7、.browserslistrc

.browserslistrc 文件是用于配置兼容浏览器的。这个文件通常是在使用脚手架（如Vue CLI）搭建项目时自动生成的。

.browserslistrc 文件中的配置参数决定了你的项目代码需要兼容哪些浏览器。这些配置参数会被一些工具（如Babel、Autoprefixer等）用来确定需要转译的JavaScript特性和需要添加的CSS浏览器前缀。

> 1%
last 2 versions
not dead

• > 1%：代表全球超过1%的人使用的浏览器。
• last 2 versions：表示所有浏览器都兼容到最后两个版本。
• not dead：排除那些已经不再被维护或广泛使用的浏览器的。
• not ie <= 8：表示不兼容IE浏览器版本8及以下的版本。
• safari >= 7：表示兼容Safari浏览器版本7及以上。

8、.editorconfig

.editorconfig 文件是用于定义和维护跨编辑器（或IDE）的统一代码风格的配置文件。

为了使 .editorconfig 文件生效，需要在编辑器中安装对应的插件。例如，在 VS Code 中需要安装 EditorConfig for VS Code 插件。

[*.{js,jsx,ts,tsx,vue}]				// 文件类型选择器，它指定了以下规则将应用于扩展名为 .js、.jsx、.ts、.tsx 和 .vue 的文件
indent_style = space				// 缩进将使用空格而不是制表符（tab）
indent_size = 2						// 每个缩进级别将使用 2 个空格
end_of_line = lf					// 文件使用 Unix 风格的换行符（LF，即 \n）
trim_trailing_whitespace = true		// 在保存文件时，将自动删除每行末尾的多余空白字符。
insert_final_newline = true			// 在文件的最后一个字符之后将自动插入一个新行（即文件将以一个空行结束）。
max_line_length = 100				// 指定代码行的最大长度不应超过 100 个字符。虽然这不是一个强制性的规则（某些编辑器或工具可能不会直接阻止超过此长度的行），但它作为一个指导原则，有助于保持代码的可读性和整洁性。

9、.eslintrc.js

ESLint（一个流行的JavaScript代码检查工具）来检查代码质量。ESLint可以帮助你识别和修复代码中的潜在问题，如语法错误、未声明的变量、不规范的代码风格等。

.eslintrc.js 文件是ESLint的配置文件，用于定义ESLint在检查Vue项目中的JavaScript或Vue文件时应遵循的规则和插件。

配置示例：

module.exports = {
  root: true,
  env: {
    node: true, // 指定代码运行的环境，这里选择了Node.js环境
    browser: true, // 如果你的代码在浏览器中运行，也需要添加这一行
    es2021: true // 启用ES2021语法
  },
  extends: [ 
    'plugin:vue/essential', // Vue官方推荐的基本规则
    'eslint:recommended' // 官方推荐的ESLint规则
  ],
  parserOptions: {
    parser: 'babel-eslint', // 指定解析器及其选项，这里选择了babel-eslint
    ecmaVersion: 2021, // 指定ECMAScript版本
    sourceType: 'module' // 指定源代码类型（如模块）
  },
  plugins: [
    'vue' // 引入vue插件
  ],
  rules: {     // 在这里添加自定义的规则
    //'semi': ['error', 'never'],//分行检测：不需要分号
    //'index': ['warn', 2],//缩进检测：两行缩进，非两行进行警告
    //'quotes': ['error', 'double'],//引号检测：双引号
    'arrow-body-style': ['off'], //箭头函数中,如果函数体里只有一句代码时允许不省略大括号
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 根据环境变量控制console的使用
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 根据环境变量控制debugger的使用
    'vue/no-unused-vars': 'warn' // 警告Vue文件中的未使用变量
  }
};

可以通过运行npx eslint --init命令来自动生成一个配置文件。这个命令会引导你通过一系列问题来配置ESLint，包括选择你想要的配置风格（如Airbnb、Standard等）、你的代码是否运行在浏览器或Node.js环境中、是否使用TypeScript等。

安装 ESLint：

# 安装ESLint以及相关插件
# vue add eslint
# npm install eslint eslint-plugin-vue --save-dev
yarn add eslint eslint-plugin-vue --dev

在代码中使用ESLint:

• 在代码编辑器中使用ESLint：
  • 大多数现代代码编辑器（如VSCode、Sublime Text等）都提供了ESLint插件，可以实时检查代码中的问题。你只需安装对应的ESLint插件，并在编辑器中启用它即可。
• 在命令行中运行ESLint：
  • 在package.json文件中添加一个脚本，以便在终端中运行ESLint。例如：

    "scripts": {
      "lint": "eslint --ext .js,.vue src"
    }
    

    然后，你可以通过运行npm run lint 或yarn lint命令来检查代码中的问题。
  • 检查项目中的所有JavaScript和Vue文件

    npx eslint . --ext .js,.vue
    

10、.gitattributes

.gitattributes 文件主要用于定义Git仓库中不同文件的属性，以帮助Git更好地管理这些文件。以下是 .gitattributes 文件在Vue项目中的一些主要用途：

• 指定文件的文本或二进制属性：
  通过 .gitattributes 文件，可以告诉Git哪些文件应该被视为文本文件，哪些应该被视为二进制文件。这对于处理包含特殊字符或换行符的文件尤其重要。
• 设置换行符转换：
  由于不同操作系统对换行符的处理方式不同（如Windows使用CRLF，而Linux和macOS使用LF），.gitattributes 文件可以用来指定在提交和检出文件时应该如何转换换行符。这有助于避免跨平台协作时出现的换行符不一致问题。
• 影响Git命令的行为：
  .gitattributes 文件中的配置还可以影响一些Git命令的行为，如 git diff、git merge 等。例如，可以通过设置属性来指定如何比较和合并特定类型的文件。
• 优化性能：
  对于一些大文件或不需要频繁检查的文件，可以通过 .gitattributes 文件来优化Git的性能。例如，可以设置某些文件在检出时不进行换行符转换，从而减少不必要的处理时间。
• 解决特定问题：
  在某些情况下，.gitattributes 文件还可以用来解决特定的问题。例如，如果项目中包含了一些在某些操作系统上无法正常显示或处理的图片或其他文件，可以通过 .gitattributes 文件来指定这些文件的处理方式，以确保它们能够在所有平台上正确显示和处理。

/.yarn/**            linguist-vendored
/.yarn/releases/*    binary
/.yarn/plugins/**/*  binary
/.pnp.*              binary linguist-generated

• /.yarn/** linguist-vendored
  这一行指示Git Linguist（一个用于分析代码库语言组成的工具，通常与GitHub集成）将 .yarn/ 目录下的所有文件视为“vendored”代码。这意味着这些文件不会被计入代码库的语言统计中，通常是因为它们是由第三方工具或库生成的，而不是项目本身的源代码。
• /.yarn/releases/* binary
  这一行告诉Git将 .yarn/releases/ 目录下的所有文件视为二进制文件。这意味着Git不会尝试对这些文件进行文本差异比较（diff），也不会在合并时尝试自动合并它们。这通常适用于那些不应该被文本比较或合并的文件，比如预编译的二进制文件或压缩包。
• /.yarn/plugins/**/* binary
  这一行与上一行类似，但它针对的是 .yarn/plugins/ 目录下的所有文件。同样，这些文件被标记为二进制文件，Git不会对它们进行文本差异比较或自动合并。
• /.pnp.* binary linguist-generated
  这一行指定了以 .pnp. 开头的所有文件（通常位于项目根目录）应该被视为二进制文件，并且是由某种工具（在这里可能是Yarn的PlugnPlay功能）生成的。linguist-generated 属性再次告诉Git Linguist这些文件是自动生成的，不应该计入代码库的语言统计中。

11、.gitignore

.gitignore 文件的主要作用是告诉Git哪些文件或目录不应该被纳入版本控制中。通过编辑 .gitignore 文件，开发者可以指定一些不需要被跟踪的文件类型，如临时文件、编译产物、日志文件、依赖包目录等，以保持代码仓库的整洁和高效。

具体来说，.gitignore 文件在Vue项目中的用途包括以下几个方面：

• 忽略编译产物：Vue项目在构建过程中会产生一些编译产物，如打包后的JavaScript和CSS文件。这些文件通常不需要被纳入版本控制，因为它们可以通过源代码重新生成。因此，可以在 .gitignore 文件中指定忽略这些文件或目录。
• 忽略依赖包目录：Vue项目通常会使用npm或Yarn等包管理工具来管理依赖包。这些工具会在项目中生成一个包含所有依赖包信息的目录（如 node_modules）。由于这个目录非常大且经常变化，因此通常会被添加到 .gitignore 文件中以避免将其纳入版本控制。
• 忽略日志文件：在开发过程中，可能会产生一些日志文件，如服务器日志、调试日志等。这些文件通常包含敏感信息或临时数据，不需要被纳入版本控制。因此，可以在 .gitignore 文件中指定忽略这些日志文件。
• 忽略临时文件：在开发过程中，可能会创建一些临时文件，如编辑器生成的备份文件、临时构建文件等。这些文件同样不需要被纳入版本控制，因此可以在 .gitignore 文件中指定忽略它们。
  提高版本管理效率：通过合理使用 .gitignore 文件，可以减少Git仓库的体积和复杂度，提高版本管理的效率。同时，还可以避免在合并分支或拉取代码时出现不必要的冲突和错误。

12、.yarn文件夹、.yarnrc.yml 和 yarn.lock 文件

如果使用 yarn包管理器，项目根目录下还有.yarn文件夹、.yarnrc.yml 和 yarn.lock 文件。

• .yarn 文件夹
  • .yarn 文件夹是Yarn包管理器在项目中自动生成的一个目录，用于存储Yarn的缓存数据和依赖包信-息。这个文件夹通常包含多个子目录和文件，用于管理项目的依赖关系、插件、缓存等。
  • 作用：存储Yarn的缓存和依赖信息，提高依赖安装的效率和准确性。
  • 生成方式：当运行 yarn install 命令时，Yarn会自动生成这个文件夹及其内容。
• .yarnrc.yml 文件
  • .yarnrc.yml 文件是Yarn的配置文件，用于定义Yarn的行为和设置。这个文件允许开发者根据项目需求自定义Yarn的安装、构建和发布流程。
  • 作用：配置Yarn的行为和设置，如缓存位置、依赖版本、插件使用等。
  • 生成方式：这个文件通常是由开发者手动创建的，但也可以由Yarn在某些命令执行时自动生成一个默认的配置文件。开发者可以根据项目需求编辑这个文件来定制Yarn的行为。
• yarn.lock 文件
  • yarn.lock 文件是Yarn自动生成的锁文件，用于记录项目中依赖包的准确版本和依赖关系。这个文件确保了在不同环境中安装依赖时的一致性。
  • 作用：锁定依赖包的版本和依赖关系，确保项目在不同环境中使用相同的依赖版本。
  • 生成方式：当运行 yarn install 命令时，Yarn会根据 package.json 文件中列出的依赖项和版本范围，解析出具体的依赖包版本，并生成 yarn.lock 文件来记录这些信息。

四、插件

1、什么是插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

• Docs：Vue-Plugin

2、插件推荐

2.1 unplugin-vue-define-options

主要功能是在Vue 3的单文件组件（SFC）中提供一种更简洁的方式来定义组件的选项，如组件的name属性、inheritAttrs等。

这个插件特别适用于使用<script setup>语法的Vue 3组件。

2.2 vite-plugin-vue-setup-extend

vite-plugin-vue-setup-extend 插件是一个用于增强Vue 3在Vite项目中使用<script setup>语法的插件

主要功能：

• 扩展setup函数功能：
  • 允许在setup函数中使用ES6模块语法。
  • 允许在setup函数中使用async/await异步操作。
  • 支持在setup函数中使用源代码映射（source map）。
• 自动导入Vue API：
  • 自动导入常用的Vue响应式API，如ref、reactive、computed等，无需手动导入。
  • 这减少了代码的冗余，提高了开发效率。
• 支持TypeScript：
  • 插件支持TypeScript的类型推导，提升了开发时的智能提示和代码补全功能。
  • 这使得在TypeScript项目中使用Vue 3更加便捷。
• 简化组件代码：
  • 使得Vue组件的开发更加简洁，减少了冗余代码，提升了代码的可维护性。
  • 插件提供了defineProps和defineEmits等辅助函数，用于处理组件的属性和事件，进一步简化了组件的编写。
• 提升开发体验：
  • 通过简化常用功能的使用和提供自动导入等特性，插件为开发者提供了更加高效和愉快的开发体验。

使用方式：

• 下载插件：

  npm install vite-plugin-vue-setup-extend -D
  

• 配置 vite.config.js：

  import vueSetupExtend from 'vite-plugin-vue-setup-extend'
  
  export default defineConfig({
    plugins: [vue(), vueSetupExtend()]
  })
  

• 在 <script setup> 中使用，如组件动态命名：

  <script setup name="MyComponent">
  // 直接在 setup 标签中定义 name
  </script>
  

3、Visual Studio Code 拓展推荐

3.1 vue-official

在VSCode（Visual Studio Code）中，vue-official插件（原名Volar，现已成为Vue官方推荐的VSCode扩展）主要是为Vue.js开发者提供一系列增强开发体验和效率的功能。以下是该插件的主要功能和用途：

• 语法高亮与代码格式化：
  • vue-official插件为Vue单文件组件（.vue文件）中的HTML、CSS和JavaScript部分提供语法高亮，使代码更易于阅读和编写。
  • 支持代码格式化，确保代码风格的一致性，并符合Vue团队推荐的最佳实践。开发者可以通过配置Prettier和ESLint等工具来实现自动化格式化。
• 智能提示与自动补全：
  • 插件提供Vue组件、指令、API等的智能提示，帮助开发者在编码时获得即时的代码自动补全建议。
  • 支持TypeScript类型系统，提供精确的类型提示，减少编码错误。
• 错误检查与调试：
  • vue-official插件能够在代码中检测Vue.js相关的错误，并在编辑器中标记出来，帮助开发者及时发现和修复问题。
  • 集成调试工具，支持断点调试，开发者可以在VSCode中直接调试Vue应用程序，查看变量值，检查程序流程。
• 项目模板与组件快速创建：
  • 提供一系列的Vue项目模板和组件创建向导，使得创建新的Vue项目或组件变得更加高效和直观。
• 文件结构概览与代码导航：
  • 在编辑器中可以直接看到Vue单文件组件的结构，方便开发者进行文件内容的快速导航和管理。
• 支持Vue 3及新特性：
  • 随着Vue 3的发布，vue-official插件也进行了更新，以支持Vue 3的新特性和语法。
• 自定义配置与社区支持：
  • 插件支持自定义配置，开发者可以根据自己的需求进行调整。
  • 拥有活跃的社区支持，确保插件能够与时俱进，不断更新和完善。

二十、资料

• 大神笔记，涵盖前后端数据库等方面
• 关于vite+vue3+ts项目中env.d.ts 文件详解