.,:,,, .::,,,::.
.::::,,;;, .,;;:,,....:i:
:i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i.
:;..:::;::::i;,,:::;:,,,,,,,,,,..,.,,:::iri:. .,:irsr:,.;i.
;;..,::::;;;;ri,,,. ..,,:;s1s1ssrr;,.;r,
:;. ,::;ii;:, . ................... .;iirri;;;,,;i,
,i. .;ri:. ... ............................ .,,:;:,,,;i:
:s,.;r:... ....................................... .::;::s;
,1r::. .............,,,.,,:,,........................,;iir;
,s;........... ..::.,;:,,. ...............,;1s
:i,..,. .,:,,::,. .......... .......;1,
ir,....:rrssr;:, ,,.,::. .r5S9989398G95hr;. ....,.:s,
;r,..,s9855513XHAG3i .,,,,,,,. ,S931,.,,.;s;s&BHHA8s.,..,..:r:
:r;..rGGh, :SAG;;G@BS:.,,,,,,,,,.r83: hHH1sXMBHHHM3..,,,,.ir.
,si,.1GS, sBMAAX&MBMB5,,,,,,:,,.:&8 3@HXHBMBHBBH#X,.,,,,,,rr
;1:,,SH: .A@&&B#&8H#BS,,,,,,,,,.,5XS, 3@MHABM&59M#As..,,,,:,is,
.rr,,,;9&1 hBHHBB&8AMGr,,,,,,,,,,,:h&&9s; r9&BMHBHMB9: . .,,,,;ri.
:1:....:5&XSi;r8BMBHHA9r:,......,,,,:ii19GG88899XHHH&GSr. ...,:rs.
;s. .:sS8G8GG889hi. ....,,:;:,.:irssrriii:,. ...,,i1,
;1, ..,....,,isssi;, .,,. ....,.i1,
;h: i9HHBMBBHAX9: . ...,,,rs,
,1i.. :A#MBBBBMHB##s ....,,,;si.
.r1,.. ,..;3BMBBBHBB#Bh. .. ....,,,,,i1;
:h;.. .,..;,1XBMMMMBXs,.,, .. :: ,. ....,,,,,,ss.
ih: .. .;;;, ;;:s58A3i,.. ,. ,.:,,. ...,,,,,:,s1,
.s1,.... .,;sh, ,iSAXs;. ,. ,,.i85 ...,,,,,,:i1;
.rh: ... rXG9XBBM#M#MHAX3hss13&&HHXr .....,,,,,,,ih;
.s5: ..... i598X&&A&AAAAAA&XG851r: ........,,,,:,,sh;
. ihr, ... . .. ........,,,,,;11:.
,s1i. ... ..,,,..,,,.,,.,,.,.. ........,,.,,.;s5i.
.:s1r,...................... ..............;shs,
. .:shr:. .... ..............,ishs.
.,issr;,... ...........................,is1s;.
.,is1si;:,....................,:;ir1sr;,
..:isssssrrii;::::::;;iirsssssr;:..
.,::iiirsssssssssrri;;:.
Vite5 + Vue2.7 + JavaScript + Pinia + Vue Router + Scss
Vite5 不再支持 Node.js 14 / 16 / 17 / 19，现在需要 Node.js 18 / 20+。
-
🔴 Vite 5: Vite，下一代的前端工具链，为开发提供极速响应。
-
🟠 Vue 2.7: 渐进式 JavaScript 框架。Vue 2.7 是 Vue 2 最新的次级版本。提供内置的组合式 API 支持。
-
🟡 Vue Router: Vue.js官方路由器，提供富有表现力、可配置的、方便的路由。
-
🟢 Pinia: 符合直觉的Vue.js 状态管理库，类型安全、可扩展性以及模块化设计。甚至让你忘记正在使用的是一个状态库。
-
🔵 Element: Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
-
🟤 Scss: 成熟、稳定、强大的专业级CSS扩展语言。
-
🟣 Axios: 一个基于 promise 的网络请求库，可以用于浏览器和 node.js。
-
⚫️ Vue I18n: Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
-
🟧 EditorConfig + ESLint + Prettier + Stylelint: 代码规范
-
🟥 Husky + Lint-Staged + Cz-Git + Commitlint: Git Hook 工具与提交规范
# 安装依赖
npm install
# 运行
npm run dev# 构建
npm run build-
-
EditorConfig for VS Code - EditorConfig 对 Visual Studio Code 的支持。
-
Vetur - VS Code 的 Vue 工具。
-
ESLint: 将 ESLint JavaScript 集成到 VS Code。
-
Prettier: 使用 prettier 格式化代码。
-
StyleLint: 先进的 CSS 代码检查器。
-
统一不同 IDE 编辑器的编码风格。
在 VSCode 中使用需要安装 EditorConfig for VS Code 插件。
VS Code 使用 ESLint 配置需要下载插件 ESLint 。
更多配置项信息，前往 ESLint 官网查看 ESLint-Configuring
VS Code 使用 Prettier 配置需要下载插件 Prettier 。
更多配置项信息，前往 Prettier 官网查看
eslint-plugin-prettier 和 eslint-config-prettier
eslint-plugin-prettier： 将 Prettier 的规则设置到 ESLint 的规则中
eslint-config-prettier： 关闭 ESLint 中与 Prettier 中会发生冲突的规则
优先级：Prettier 配置规则 > ESLint 配置规则
Visual Studio Code 编辑器使用 Stylelint 配置需要下载插件 StyleLint。
修改 Visual Studio Code 工作区配置
{
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"]
}更多配置项信息，前往 stylelint 官网查看
VS Code 在
settings.json文件中，增加以下代码：
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
}
}在本地执行
git commit时，对所提交的代码进行检测和修复，如果这些代码没通过规则校验，则禁止提交。
commit message由 Header、Body、Footer 组成。
<Header>
<Body>
<Footer>Header 部分包括三个字段
type（必需）、scope（可选）和subject（必需）。
`type 用于说明 commit 的提交类型（必须是以下几种之一）。
| 值 | 描述 |
|---|---|
| feat | 新增功能 |
| fix | 修复问题 |
| docs | 文档变更 |
| style | 代码格式（不影响功能，例如空格、分号等格式修正） |
| refactor | 代码重构 |
| perf | 改善性能 |
| test | 测试 |
| build | 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等） |
| ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如scopes: Travis, Circle 等 |
| chore | 变更构建流程或辅助工具 |
| revert | 代码回退 |
用于指定本次 commit 影响的范围。
scope 依据项目而定，例如在业务项目中可以依据菜单或者功能模块划分，如果是组件库开发，则可以依据组件划分。
subject 是本次 commit 的简洁描述，长度约定在 50 个字符以内，通常遵循以下几个规范：
- 用动词开头，第一人称现在时表述，例如：change 代替 changed 或 changes
- 第一个字母小写
- 结尾不加句号（.）
-
body 是对本次 commit 的详细描述，可以分成多行。
-
跟 subject 类似，用动词开头，body 应该说明修改的原因和更改前后的行为对比。
- 如果本次提交的代码是突破性的变更或关闭缺陷，则 Footer 必需，否则可以省略。
集成 cz-git
vite-plugin-mock@2.9.8对应path-to-regexp@4.0.5