项目准备

在项目初期，会对项目技术栈选型进行一次前期准备梳理工作，列出一个vue 项目基本会使用的技术栈如下：

• 代码管理工具: git/ svn

• 开发工具 :Visual Studio Code

• 编程语言 :TypeScript + JavaScript

• 构建工具 :Vite / Webpack

• 前端框架 :Vue 3.x + setup

• 路由工具 :Vue Router

• 状态管理 :Vuex / Pinia

• UI 框架 :Element Plus / Ant Vue / ArcoDesign

• 可视化 :Echart

• 工具库 :@vueuse/core + dayjs + countup.js等等

• CSS 预编译 :Sass / Less

• HTTP 工具 : Axios

• Git Hook 工具 :husky 作为一个 Git Hook 工具，它允许你在 Git 特定事件（例如提交代码、推送代码等）发生时执行自定义脚本。Git Hook 是 Git中的钩子，它们允许你在特定的 Git 事件发生之前或之后执行自定义操作。Husky 提供了一种简单的方式来配置和管理这些钩子

• 代码规范 :EditorConfig + Prettier + ESLint ，他们的作用是用来定义代码编写风格和规范的指南。它们有助于确保团队成员编写的代码风格一致，提高代码可读性和可维护性

• 提交规范 :Commitizen + Commitlint，提交规范是一种约定，用于规范化代码提交的格式和风格。它有助于团队成员理解提交信息的含义，并提供一致的提交历史记录

• 单元测试：Vitest / Jest，在验证代码的各个独立单元（通常是函数或方法）是否按照预期进行工作。在单元测试中，我们将代码的每个部分与预期的结果进行比较，以确保其功能正确。

• 端到端自动化测试 Cypress / Nightwatch / Playwright ，模拟和测试整个应用程序的用户场景和功能。它模拟真实用户在应用程序中的操作和交互，并测试整个应用程序的各个组件和功能是否正常运行。在端到端自动化测试中，测试人员编写脚本或使用自动化测试工具来模拟用户在应用程序中的行为，例如点击按钮、填写表单、导航到不同页面等。测试脚本会自动执行这些操作，并验证应用程序的响应是否符合预期。这种测试方法涵盖了从前端用户界面到后端服务器的整个应用程序堆栈，以确保整个系统的功能和集成正常工作

• 自动部署 :Centos + Jenkins + Nginx

关于 Visual Studio Code 管理配置 ​

在使用 Visual Studio Code 编辑器的时候，一般都会在项目目录上看到一个 ".vscode" 文件夹，这个文件里包含编辑器的各种配置选项和个性化设置，统一配置可以方便项目团队统一管理，常见一些配置文件

• settings.json：这个文件包含了你的编辑器的全局设置。你可以在其中配置各种选项，如字体、主题、缩进样式等。

• launch.json：这个文件用于配置 VS Code 的调试器。你可以在其中定义调试会话，包括启动程序所需的参数、环境变量以及断点设置等。

• tasks.json：这个文件允许你定义自定义任务（tasks），例如运行脚本、构建项目或执行其他自动化任务。你可以在其中配置任务的命令、参数和其他设置。

• extensions.json：这个文件用于存储你当前项目所需的推荐扩展列表。当你打开项目时，VS Code 会根据这个文件中定义的扩展推荐进行安装。下面例子就是制定了 vscode 中这个项目使用到的两个插件

{
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

• keybindings.json：这个文件包含了你自定义的键盘快捷键绑定。你可以在其中定义自己喜欢的快捷键组合，以提高编辑效率。

补充详细说明 ​

补充详细说明 EditorConfig + Prettier + ESLint

• EditorConfig 是一个用于配置编辑器行为的文件格式和解析器。它可以用来定义代码缩进、换行符、字符编码等方面的规范。通过在项目中添加一个名为 ".editorconfig" 的文件，并在其中定义规范，可以确保团队成员在不同的编辑器中获得一致的编辑体验。

• Prettier 是一个代码格式化工具，它可以自动格式化你的代码，使其符合预定义的规范。Prettier 可以处理各种编程语言，并提供了许多可配置的选项，以根据项目需求进行自定义。通过在项目中配置 Prettier，你可以确保团队成员编写的代码具有一致的格式，无论他们使用的是哪个编辑器。

• ESLint 是一个用于检查和报告 JavaScript 代码中潜在问题的工具。它基于一组预定义的规则，可以检查代码中的语法错误、代码风格问题、潜在的 bug 等。ESLint 具有可扩展的配置选项，允许你根据项目需求自定义规则。通过在项目中配置 ESLint，你可以自动检查和纠正代码中的问题，以确保其质量和一致性。

补充详细说明 Commitizen + Commitlint

• Commitizen 是一个用于生成符合提交规范的交互式命令行工具。它提供了一组预定义的提交类型（如 feat、fix、docs 等），并引导开发人员填写提交信息的各个部分，例如提交类型、作用范围、描述等。Commitizen 可以帮助团队成员以统一的方式提交代码变更，提供更加清晰和易于理解的提交历史记录。

• Commitlint 是一个用于验证提交信息是否符合规范的工具。它通过使用自定义的规则和正则表达式，对提交信息进行检查和验证。Commitlint 可以帮助团队在提交代码之前检查提交信息的格式和内容，以确保其符合预定义的规范。这有助于提高提交信息的质量和可读性，并使团队成员更容易理解提交的含义。

单元测试 Vitest / Jest

• Vitest 是一个用于 Vue.js 应用程序的单元测试工具。它基于 Jest，并提供了专门为 Vue 组件和指令编写测试的功能。Vitest 支持 Vue 组件的快照测试、DOM 渲染测试、事件触发测试等常见的测试场景。它还提供了用于模拟 Vuex 状态管理库的辅助函数，以便更方便地编写针对 Vuex 的单元测试。Vitest 的目标是简化 Vue.js 应用程序的单元测试流程，提供易于理解和维护的测试代码。

• Jest 是一个流行的 JavaScript 测试框架，广泛用于编写前端和后端 JavaScript 应用程序的单元测试。它具有简单易用的语法和强大的功能，支持模拟、断言、覆盖率报告等。Jest 可以与多种前端框架（如 React、Vue.js 和 Angular）以及后端框架（如 Node.js）一起使用。它提供了一套丰富的 API，如测试运行器、断言库、模拟库等，使得编写可靠的单元测试变得更加简单和高效。

端到端自动化测试 Cypress / Nightwatch / Playwright

• Cypress 是一个现代化的前端端到端测试框架。类似 selenium 控制浏览器或无头浏览器对你的项目进行真实的操作.是一种模拟用户行为的操作。提供了直观的 API 和交互式的测试运行界面。包括实时重新加载、自动等待、可视化断言和实时监视等（教程一 教程二）

• Nightwatch是一个基于Node.js和Selenium WebDriver的自动化测试框架。它提供了简单的API和丰富的断言库，使得编写和执行端到（End-to-End）自动化测试变得更加容易。Nightwatch可以用于测试Web应用程序的各个方面，包括页面导航、表单交互、元素操作以及验证页面内容等。

• Playwright是一个跨浏览器的自动化测试工具，由Microsoft开发。它支持多种浏览器（如Chrome、Firefox和WebKit），并提供了一组强大的API，可用于编写端到端自动化测试脚本。Playwright具有快速且可靠的测试执行，并提供了对浏览器的精细控制能力，例如模拟用户交互、网络请求拦截和修改、页面截图等。它还支持并行执行测试用例，以提高测试效率。

工具版本管理器 ​

为了可以更方便的切换项目 node 版本 和 npm 的镜像源，我们可以使用 nvm 和 nrm 这两个工具来管理

• Windows 下安装 nvm使用需注意，安装 nvm 之前需要先卸载掉 node，所以安装前可以先查看下当前本机 node 版本，下载好 nvm 后再通过 nvm 安装上这个版本 node，防止突然换了其他版本 node 后对当前电脑上的项目造成一些影响。找到需要安装的版本后只要，接双击一路 next 安装即可，需要注意安装时选择安装地址，只要你选的安装地址目录没有中文和空格，一般不会出现问题的

nvm-noinstall.zip # 绿色免安装版，使用时需进行配置
nvm-setup.zip     # 全自动安装版，推荐使用

nvm ls-remote # 查看node所有版本
nvm install node # 安装最新node可用版本
nvm version/nvm current # 查看当前nvm使用node版本
nvm list available # 查看可安装node版本
nvm list/nvm ls # 查看已安装版本
nvm install <version> # 安装指定node版本
nvm uninstall <version> # 卸载指定node版本
nvm use <version> # 切换使用指定版本node
nvm use [version] [arch] # 切换指定node版本和位数
nvm reinstall-packages <version> # 在当前版本node环境下，重新全局安装指定版本号的npm包

nvm on # 打开nodejs控制
nvm off # 关闭nodejs控制
nvm alias <name> <version> # 给不同的版本号添加别名
nvm unalias <name> # 删除已定义别名
nvm proxy # 查看设置与代理
nvm node_mirror [url] # 设置setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] # 设置setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
nvm root [path] # 设置和查看root路径

• nrm 管理切换镜像源,通过镜像源配置可以切换到国内的镜像源，提高下载速度，或者是公司内部的镜像仓库 使用 npm install -g nrm 安装即可

nrm -h /nrm -help  # 查看 nrm 帮助（相关命令、信息）
nrm -V             # 查看当前 nrm 版本
nrm ls             # 查看当前 nrm 中可用的镜像源地址
nrm current        # 查看当前使用镜像源

nrm use <registry> # 切换为某个镜像源 registry-镜像源名
nrm add <registry> <url> # 添加一个镜像源 registry-镜像源名 url-镜像源地址
nrm del <registry>  # 删除一个镜像源
nrm test <registry> # 测试该镜像源下载响应时间