admin-vben5/docs/src/guide/introduction/quick-start.md

110 lines
2.0 KiB
Markdown
Raw Normal View History

---
outline: deep
---
# 快速开始 {#quick-start}
## 前置准备
::: info 环境要求
在启动项目前,你需要确保你的环境满足以下要求:
chore(deps): bump the non-breaking-changes group with 14 updates (#4347) * chore(deps): bump the non-breaking-changes group with 14 updates Bumps the non-breaking-changes group with 14 updates: | Package | From | To | | --- | --- | --- | | [typescript](https://github.com/microsoft/TypeScript) | `5.5.4` | `5.6.2` | | [@iconify/json](https://github.com/iconify/icon-sets) | `2.2.245` | `2.2.246` | | [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/HEAD/plugin-packs/postcss-preset-env) | `10.0.2` | `10.0.3` | | [@jspm/generator](https://github.com/jspm/generator) | `2.2.0` | `2.3.0` | | [vite-plugin-dts](https://github.com/qmhc/vite-plugin-dts) | `4.1.1` | `4.2.1` | | [eslint-plugin-command](https://github.com/antfu/eslint-plugin-command) | `0.2.3` | `0.2.4` | | [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) | `9.9.1` | `9.10.0` | | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) | `8.4.0` | `8.5.0` | | [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) | `8.4.0` | `8.5.0` | | [eslint](https://github.com/eslint/eslint) | `9.9.1` | `9.10.0` | | [eslint-plugin-perfectionist](https://github.com/azat-io/eslint-plugin-perfectionist) | `3.4.0` | `3.5.0` | | [watermark-js-plus](https://github.com/zhensherlock/watermark-js-plus) | `1.5.5` | `1.5.6` | | [circular-dependency-scanner](https://github.com/emosheeep/circular-dependency-scanner) | `2.2.2` | `2.3.0` | | [@tanstack/vue-query](https://github.com/TanStack/query/tree/HEAD/packages/vue-query) | `5.54.2` | `5.55.4` | Updates `typescript` from 5.5.4 to 5.6.2 - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](https://github.com/microsoft/TypeScript/compare/v5.5.4...v5.6.2) Updates `@iconify/json` from 2.2.245 to 2.2.246 - [Commits](https://github.com/iconify/icon-sets/compare/2.2.245...2.2.246) Updates `postcss-preset-env` from 10.0.2 to 10.0.3 - [Changelog](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/CHANGELOG.md) - [Commits](https://github.com/csstools/postcss-plugins/commits/HEAD/plugin-packs/postcss-preset-env) Updates `@jspm/generator` from 2.2.0 to 2.3.0 - [Release notes](https://github.com/jspm/generator/releases) - [Commits](https://github.com/jspm/generator/compare/2.2.0...2.3.0) Updates `vite-plugin-dts` from 4.1.1 to 4.2.1 - [Release notes](https://github.com/qmhc/vite-plugin-dts/releases) - [Changelog](https://github.com/qmhc/vite-plugin-dts/blob/main/CHANGELOG.md) - [Commits](https://github.com/qmhc/vite-plugin-dts/compare/v4.1.1...v4.2.1) Updates `eslint-plugin-command` from 0.2.3 to 0.2.4 - [Release notes](https://github.com/antfu/eslint-plugin-command/releases) - [Commits](https://github.com/antfu/eslint-plugin-command/compare/v0.2.3...v0.2.4) Updates `@eslint/js` from 9.9.1 to 9.10.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/commits/v9.10.0/packages/js) Updates `@typescript-eslint/eslint-plugin` from 8.4.0 to 8.5.0 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.5.0/packages/eslint-plugin) Updates `@typescript-eslint/parser` from 8.4.0 to 8.5.0 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.5.0/packages/parser) Updates `eslint` from 9.9.1 to 9.10.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.9.1...v9.10.0) Updates `eslint-plugin-perfectionist` from 3.4.0 to 3.5.0 - [Release notes](https://github.com/azat-io/eslint-plugin-perfectionist/releases) - [Changelog](https://github.com/azat-io/eslint-plugin-perfectionist/blob/main/changelog.md) - [Commits](https://github.com/azat-io/eslint-plugin-perfectionist/compare/v3.4.0...v3.5.0) Updates `watermark-js-plus` from 1.5.5 to 1.5.6 - [Release notes](https://github.com/zhensherlock/watermark-js-plus/releases) - [Changelog](https://github.com/zhensherlock/watermark-js-plus/blob/main/CHANGELOG.md) - [Commits](https://github.com/zhensherlock/watermark-js-plus/compare/v1.5.5...v1.5.6) Updates `circular-dependency-scanner` from 2.2.2 to 2.3.0 - [Release notes](https://github.com/emosheeep/circular-dependency-scanner/releases) - [Changelog](https://github.com/emosheeep/circular-dependency-scanner/blob/master/CHANGELOG.md) - [Commits](https://github.com/emosheeep/circular-dependency-scanner/compare/v2.2.2...v2.3.0) Updates `@tanstack/vue-query` from 5.54.2 to 5.55.4 - [Release notes](https://github.com/TanStack/query/releases) - [Commits](https://github.com/TanStack/query/commits/v5.55.4/packages/vue-query) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: "@iconify/json" dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: postcss-preset-env dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: "@jspm/generator" dependency-type: direct:production update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: vite-plugin-dts dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: eslint-plugin-command dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: "@eslint/js" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: eslint-plugin-perfectionist dependency-type: direct:development update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: watermark-js-plus dependency-type: direct:production update-type: version-update:semver-patch dependency-group: non-breaking-changes - dependency-name: circular-dependency-scanner dependency-type: direct:production update-type: version-update:semver-minor dependency-group: non-breaking-changes - dependency-name: "@tanstack/vue-query" dependency-type: direct:production update-type: version-update:semver-minor dependency-group: non-breaking-changes ... Signed-off-by: dependabot[bot] <support@github.com> * chore: update deps * chore: typo --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-10 22:05:11 +08:00
- [Node.js](https://nodejs.org/en) 20.15.0 及以上版本,推荐使用 [fnm](https://github.com/Schniz/fnm) 或者 [nvm](https://github.com/nvm-sh/nvm) 进行版本管理。
- [Git](https://git-scm.com/) 任意版本。
验证你的环境是否满足以上要求,你可以通过以下命令查看版本:
```bash
# 出现相应 node LTS版本即可
node -v
# 出现相应 git 版本即可
git -v
```
:::
## 启动项目
### 获取源码
::: code-group
```sh [GitHub]
# clone 代码
git clone https://github.com/vbenjs/vue-vben-admin.git
```
```sh [Gitee]
# clone 代码
# Gitee 的代码可能不是最新的
git clone https://gitee.com/annsion/vue-vben-admin.git
```
:::
::: danger 注意
注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格,否则安装依赖后启动会出错。
:::
### 安装依赖
在你的代码目录内打开终端,并执行以下命令:
```bash
# 进入项目目录
cd vue-vben-admin
# 使用项目指定的pnpm版本进行依赖安装
corepack enable
# 安装依赖
pnpm install
```
::: tip 注意
项目只支持使用 `pnpm` 进行依赖安装,默认会使用 `corepack` 来安装指定版本的 `pnpm`。:
:::
### 运行项目
#### 选择项目
2024-10-29 21:49:15 +08:00
执行以下命令运行项目:
```bash
# 启动项目
pnpm dev
```
此时,你会看到类似如下的输出,选择你需要运行的项目:
```bash
◆ Select the app you need to run [dev]:
│ ○ @vben/web-antd
│ ○ @vben/web-ele
│ ○ @vben/web-naive
│ ○ @vben/docs
│ ● @vben/playground
```
2024-07-28 17:01:19 +08:00
现在,你可以在浏览器访问 `http://localhost:5555` 查看项目。
#### 运行指定项目
如果你不想选择项目,可以直接运行以下命令运行你需要的应用:
```bash
pnpm run dev:antd
pnpm run dev:ele
pnpm run dev:naive
pnpm run dev:docs
pnpm run dev:play
```