本地开发

代码获取

如果你还没有获取代码，可以先从 快速开始 处开始阅读文档。

前置准备

为了更好的开发体验，我们提供了一些工具配置、项目说明，以便于您更好的开发。

需要掌握的基础知识

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

• Pinia - Vue.js 的状态管理库
• Pnpm - 快速、节省磁盘空间的包管理工具
• Tailwindcss - 用于快速构建自定义用户界面的实用工具优先的 CSS 框架
• TypeScript - JavaScript 的超集，为 JavaScript 添加了类型支持
• UnoCSS - 即时按需原子 CSS 引擎
• Vitejs - 下一代前端构建工具
• Vitest - 轻量、快速的单元测试框架
• Vue3 - 渐进式 JavaScript 框架
• Vue I18n - Vue.js 的国际化插件
• Vue Router - Vue.js 的官方路由管理器
• Naive UI - 一个 Vue 3 组件库

工具配置

如果您使用的 IDE 是 vscode（推荐）的话，可以安装以下工具来提高开发效率及代码格式化:

• Code Spell Checker - 拼写检查
• Color Highlight - 颜色高亮
• DotENV - .env 文件高亮
• EditorConfig - 编辑器配置
• ESLint - 代码检查
• GitLens - Git 集成
• i18n Ally - i18n 支持
• Iconify IntelliSense - 图标支持
• Stylelint - 样式检查
• UnoCSS - UnoCSS 支持
• Vue - Official - Vue 支持

Npm Scripts

npm 脚本是项目常见的配置，用于执行一些常见的任务，比如启动项目、打包项目等。以下的脚本都可以在项目根目录的 package.json 文件中找到。

执行方式为：pnpm [script]。

{
  "scripts": {
    // 构建 web 项目
    "build:web": "pnpm --filter a4v-web build",
    // 构建文档项目
    "build:docs": "pnpm --filter a4v-docs build",
    // 删除所有的 node_modules、pnpm-lock.yaml
    "clean": "node ./scripts/clean.js",
    // 检查拼写
    "check": "cspell lint **/*.ts **/README.md --no-progress",
    // 生成标准化的 git commit message
    "cz": "czg",
    // 启动 web 项目
    "dev:web": "pnpm --filter a4v-web dev",
    // 启动文档项目
    "dev:docs": "pnpm --filter a4v-docs dev",
    // 检查代码
    "lint": "eslint .",
    // 检查代码并修复
    "lint:fix": "pnpm eslint --fix",
    // 预览 web 项目
    "preview:web": "pnpm --filter a4v-web preview",
    // 预览文档项目
    "preview:docs": "pnpm --filter a4v-docs preview",
    // 只允许使用 pnpm
    "preinstall": "npx only-allow pnpm",
    // 准备 husky
    "prepare": "husky",
    // 删除所有的 node_modules、pnpm-lock.yaml，重新安装依赖
    "reinstall": "pnpm clean --del-lock && pnpm install",
    // 样式检查
    "style": "stylelint \"**/*.{css,html,sass,scss,vue}\" \"**/.vitepress/**/*.{css,html,sass,scss,vue}\"",
    // 样式检查并修复
    "style:fix": "pnpm stylelint --fix"
  }
}

本地运行项目

如果你想直接运行某个应用，可以执行以下命令：

运行 web 应用：

pnpm dev:web

运行 docs 应用：

pnpm dev:docs

DevTools

项目内置了 Vue DevTools 插件，可以在开发过程中使用。默认 true，可在 .env.development 内关闭，并重新运行项目即可：

VITE_DEVTOOLS = true

开启后，项目运行会在页面底部显示一个 Vue DevTools 的图标，点击即可打开 DevTools。

本地运行文档

如需本地运行文档，并进行调整，可以执行以下命令：

pnpm dev:docs

问题解决

如果你在使用过程中遇到依赖相关的问题，可以尝试重新安装依赖：

# 请在项目根目录下执行
# 该命令会删除整个仓库所有的 node_modules、pnpm-lock.yaml 后
# 再进行依赖重新安装（安装速度会明显变慢）
pnpm reinstall