IT评测·应用市场-qidao123.com

标题: 【Vue.js】 [打印本页]

---

作者: 何小豆儿在此    时间: 2025-3-15 14:09
标题: 【Vue.js】
一、简介

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 项目：
    1. yarn create vite my-vue-app --template vue

    复制代码
    这个命令会安装和实行 create-vue，跟随命令行的提示继续使用即可。
    
  • 用 Vue CLI 来创建项目（Vue CLI Install）
    1. # 安装：
    2. # yarn global add @vue/cli
    3. npm install -g @vue/cli
    5. # 创建一个项目：
    6. # vue create my-project
    7. vue ui

    复制代码
  
  

三、 项目结构

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

1. my-vue-app/
2. ├── node_modules/         # 项目依赖包（安装后生成）
3. ├── public/               # 静态资源目录（直接复制到构建结果中）
4. │   └── vite.svg          # Vite 示例图标
5. ├── src/                  # 项目源码目录
6. │   ├── assets/           # 资源文件（如图片、CSS、字体等）
7. │   │   └── vue.svg       # Vue 示例图标
8. │   ├── components/       # 可复用 Vue 组件
9. │   │   └── Hello.vue
10. │   ├── router/                 # 路由配置（使用 Vue Router 时）
11. │   │   └── index.ts
12. │   ├── store/                  # Vuex 状态管理（使用 Vuex 时）
13. │   │   └── index.ts
14. │   ├── views/                  # 页面级组件
15. │   │   └── Home.vue
16. │   ├── App.vue           # 根组件（项目入口组件）
17. │   └── main.ts           # 应用入口文件（初始化 Vue 实例）
18. ├── .gitignore            # Git 忽略规则（默认排除 node_modules/ 等）
19. ├── index.html            # 主 HTML 文件（Vite 入口）
20. ├── package.json          # 项目配置（依赖、脚本命令等）
21. ├── vite.config.ts        # Vite 配置文件（已集成 Vue 插件）
22. └── README.md             # 项目说明文档
25. ├── .browserslistrc     # 浏览器兼容配置
26. ├── .editorconfig                 # 代码风格配置
27. ├── .env                                 # 环境变量配置
28. ├── .eslintrc.js        # ESLint配置
29. ├── .gitattributes                # Git文件管理配置
30. ├── .gitignore                # Git 忽略配置
31. ├── env.d.ts                         # 定义全局类型声明
32. ├── babel.config.js           # Babel 配置
33. ├── yarn.lock                   # 记录通过yarn命令下载到 node_modules 目录下的每一个包的下载信息
34. ├── package-lock.json   # 记录通过npm 命令下载到 node_modules 目录下的每一个包的下载信息

复制代码

1、package.json

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

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

复制代码

dependencies & devDependencies

• 假如某些包只在项目开辟阶段会用到，在项目上线之后不会用到，则建议把这些包记录到 devDependencies 节点中。
  
• 与之对应的，假如某些包在开辟和项目上线之后都需要用到，则建议把这些包记录到 dependencies 节点中。
  1. # 安装指定的包，并记录到 devDependencies 节点中
  2. npm i 包名 -D
  4. # 注意：上述命令是简写形式，等价于下面完整的写法：
  5. 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 的情况变量或自定义模块。
  

文件内容模版：

1. /// <reference types="vite/client" />
2. /// <reference types="vite-env" />
4. interface ImportMetaEnv {
5.   VITE_APP_TITLE: string;
6.   // more environment variables...
7. }
9. interface ImportMeta {
10.   readonly env: ImportMetaEnv;
11. }

复制代码

上面的代码中，/// <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设置：

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

复制代码

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. > 1%
2. last 2 versions
3. 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 插件。

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

复制代码

9、.eslintrc.js

ESLint（一个流行的JavaScript代码查抄工具）来查抄代码质量。ESLint可以帮助你识别和修复代码中的潜在题目，如语法错误、未声明的变量、不规范的代码风格等。
.eslintrc.js 文件是ESLint的设置文件，用于定义ESLint在查抄Vue项目中的JavaScript或Vue文件时应遵照的规则和插件。
设置示例：

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

复制代码

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

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

复制代码

在代码中使用ESLint:

• 在代码编辑器中使用ESLint：
  
  
  
  • 大多数当代代码编辑器（如VSCode、Sublime Text等）都提供了ESLint插件，可以实时查抄代码中的题目。你只需安装对应的ESLint插件，并在编辑器中启用它即可。
    
  
  
• 在命令行中运行ESLint：
  
  
  
  • 在package.json文件中添加一个脚本，以便在终端中运行ESLint。比方：
    1. "scripts": {
    2.   "lint": "eslint --ext .js,.vue src"
    3. }

    复制代码
    然后，你可以通过运行npm run lint 或yarn lint命令来查抄代码中的题目。
    
  • 查抄项目中的所有JavaScript和Vue文件
    1. 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 文件来指定这些文件的处理方式，以确保它们可以或许在所有平台上准确表现和处理。
  

1. /.yarn/**            linguist-vendored
2. /.yarn/releases/*    binary
3. /.yarn/plugins/**/*  binary
4. /.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等辅助函数，用于处理组件的属性和事件，进一步简化了组件的编写。
    
  
  
• 提升开辟体验：
  
  
  
  • 通过简化常勤奋能的使用和提供自动导入等特性，插件为开辟者提供了更加高效和愉快的开辟体验。
    
  
  

使用方式：

• 下载插件：
  1. npm install vite-plugin-vue-setup-extend -D

  复制代码
• 设置 vite.config.js：
  1. import vueSetupExtend from 'vite-plugin-vue-setup-extend'
  3. export default defineConfig({
  4.   plugins: [vue(), vueSetupExtend()]
  5. })

  复制代码
• 在 <script setup> 中使用，如组件动态命名：
  1. <script setup name="MyComponent">
  2. // 直接在 setup 标签中定义 name
  3. </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 文件详解
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4