本地开发 {#development}

::: tip 代码获取

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

:::

前置准备

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

需要掌握的基础知识

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

工具配置

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

Vue - Official - Vue 官方插件（必备）。
Tailwind CSS - Tailwindcss 提示插件。
CSS Variable Autocomplete - Css 变量提示插件。
Iconify IntelliSense - Iconify 图标插件
i18n Ally - i18n 插件
ESLint - 脚本代码检查
Prettier - 代码格式化
Stylelint - css 格式化
Code Spell Checker - 单词语法检查
DotENV - .env 文件高亮

Npm Scripts

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

执行方式为：pnpm run [script] 或 npm run [script]。

{
  "scripts": {
    // 安装依赖
    "bootstrap": "pnpm install",
    // 构建项目
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    // 构建docker镜像
    "build:docker": "./build-local-docker-image.sh",
    // changeset 版本管理
    "changeset": "pnpm exec changeset",
    // 检查项目各种问题
    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type",,
    // 检查循环引用
    "check:circular": "vsh check-circular",
    // 检查依赖
    "check:dep": "vsh check-dep",
    // 检查类型
    "check:type": "turbo run typecheck",
    // 清理项目（删除node_modules、dist、.turbo）等目录
    "clean": "vsh clean",
    // 提交代码
    "commit": "czg",
    // 启动项目（默认会运行整个仓库所有包的dev脚本）
    "dev": "cross-env TURBO_UI=1 turbo run dev",
    // 启动文档
    "dev:docs": "pnpm -F @vben/website run docs:dev",
    // 格式化代码
    "format": "vsh lint --format",
    // lint 代码
    "lint": "vsh lint",
    // 依赖安装完成之后，执行所有包的stub脚本
    "postinstall": "turbo run stub",
    // 只允许使用pnpm
    "preinstall": "npx only-allow pnpm",
    // husky的安装
    "prepare": "is-ci || husky",
    // 包规范检查
    "publint": "vsh publint",
    // 删除所有的node_modules、yarn.lock、package.lock.json，重新安装依赖
    "reinstall": "pnpm clean --del-lock && pnpm bootstrap",
    // 运行 vitest 单元测试
    "test:unit": "vitest",
    // 更新项目依赖
    "update:deps": " pnpm update --latest --recursive",
    // changeset生成提交集
    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile"
  }
}

本地运行项目

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

pnpm dev

DevTools

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

VITE_DEVTOOLS=true

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

本地运行文档