import{o as n,c as e,a as s}from"./app.51e46c58.js";const a='{"title":"开始","description":"","frontmatter":{},"headers":[{"level":2,"title":"环境准备","slug":"环境准备"},{"level":2,"title":"工具配置","slug":"工具配置"},{"level":2,"title":"代码获取","slug":"代码获取"},{"level":3,"title":"从 GitHub 获取代码","slug":"从-github-获取代码"},{"level":3,"title":"从 Gitee 获取代码","slug":"从-gitee-获取代码"},{"level":2,"title":"安装","slug":"安装"},{"level":3,"title":"安装 Node.js","slug":"安装-node-js"},{"level":3,"title":"安装依赖","slug":"安装依赖"},{"level":2,"title":"npm script","slug":"npm-script"}],"relativePath":"guide/index.md","lastUpdated":1721205967753}',t={},o=s('

开始

本文将快速的帮助你从头运行并启动项目。

环境准备

本地环境需要安装 Pnpm、Node.js 和 Git

为什么使用 Pnpm，而不是用其他包管理器，大家可以搜索一下，这里就不做过多的阐述了。

注意

工具配置

如果你使用的 IDE 是vscode的话，可以安装以下工具来提高开发效率及代码格式化：

代码获取

注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

从 GitHub 获取代码

# clone 代码\ngit clone https://github.com/kailong321200875/vue-element-plus-admin.git\n\n

从 Gitee 获取代码

git clone https://gitee.com/kailong110120130/vue-element-plus-admin.git\n

代码同步

不用担心 Gitee 代码库和 Github 代码库不同步，每次版本提交发布，都会及时同步到 Gitee 上。

安装

安装 Node.js

如果您电脑未安装Node.js，请安装它，推荐 18.x 及以上

验证

# 验证 npm 是否安装成功\nnpm -v\n\n# 验证 node 是否安装成功\nnode -v\n

如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。

安装依赖

Pnpm 安装

推荐使用 Pnpm进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装 Pnpm，可以用下面命令来进行全局安装

# 全局安装 pnpm\nnpm i -g pnpm\n\n# 验证\npnpm -v\n

安装依赖

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

# 安装依赖\npnpm i\n

安装依赖时 husky 安装失败

请查看你的源码是否从 Github 或者 Gitee 直接下载的，直接下载是没有 .git 文件夹的，而 husky 需要依赖 git 才能安装。此时需使用 git init 初始化项目，再尝试重新安装即可。

当依赖安装完成后，执行以下命令即可启动项目：

pnpm run dev\n

npm script

"scripts": {\n  # 安装依赖\n  "i": "pnpm install",\n  # 本地开发环境运行\n  "dev": "vite --mode base",\n  # typeScript 检测\n  "ts:check": "vue-tsc --noEmit",\n  # 打包生产环境\n  "build:pro": "vite build --mode pro",\n  # 打包开发环境\n  "build:dev": "npm run ts:check && vite build --mode dev",\n  # 打包测试环境\n  "build:test": "npm run ts:check && vite build --mode test",\n  # 本地预览 已打包的生产环境项目包\n  "serve:pro": "vite preview --mode pro",\n  # 本地预览 已打包的开发环境项目包\n  "serve:dev": "vite preview --mode dev",\n  # 本地预览 已打包的测试环境项目包\n  "serve:test": "vite preview --mode test",\n  # 检测可更新依赖\n  "npm:check": "npx npm-check-updates",\n  # 删除 node_modules\n  "clean": "npx rimraf node_modules",\n  # 删除 缓存\n  "clean:cache": "npx rimraf node_modules/.cache",\n  # eslint 检测\n  "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",\n  # eslint 格式化\n  "lint:format": "prettier --write --loglevel warn \\"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\\"",\n  # stylelint 格式化\n  "lint:style": "stylelint --fix \\"**/*.{vue,less,postcss,css,scss}\\" --cache --cache-location node_modules/.cache/stylelint/",\n  "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",\n  "lint:pretty": "pretty-quick --staged",\n  "postinstall": "husky install",\n  # 快速生成统一规范的模块\n  "p": "plop"\n},\n
',35);t.render=function(s,a,t,l,p,r){return n(),e("div",null,[o])};export default t;export{a as __pageData};