开始

搭建第一个 Admin Pro 项目

关于项目组件以及hooks方法

项目虽然二次封装了一些组件，但是可能不能满足大部分的要求。所以，如果组件不满足你的要求，完全可以不用甚至删除代码自己写，不必坚持使用项目自带的组件。

准备

本地环境需要安装 Pnpm(6.x+)或者Yarn、Node.js(16.x+) 和 Git

注意

-推荐使用 Pnpm 作为项目指令

-Node.js 版本要求12.x以上，且不能为13.x版本，这里推荐 14.x 及以上(使用V2版本的14.18+ / 16+)。

工具配置

如果您使用的 IDE 是 Webstorm 的话，基本不需要单独安装插件

• vue.js
• TSLint
• env files support

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

• windicss IntelliSense - Windicss 提示插件
• Volar - Vue3 开发必备
• ESLint - 脚本代码检查
• Prettier - 代码格式化
• Stylelint - css 格式化
• DotENV - .env 文件 高亮

代码获取

注意

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

从 Gitee 获取代码

完整版前端代码

git clone https://gitee.com/gx12358/vue3-antd-admin

精简版前端代码

git clone https://gitee.com/gx12358/gx-admin-thin

安装

安装 Node.js

如果您电脑未安装Node.js，请安装它。

验证

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

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

安装依赖

全局安装 pnpm / yarn

npm i -g pnpm/yarn
pnpm/yarn -v # 出现版本号说明安装成功

如果安装过pnpm，但是版本低的需要更新pnpm

pnpm add -g pnpm

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

pnpm/yarn install

如果安装过后，启动报插件导入失败情况，请在根目录下新建.npmrc文件

shamefully-hoist=true

安装依赖时 husky 安装失败

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