rengar-admin文档

Appearance

快速开始 ​

环境要求 ​

创建项目 ​

bash
git clone git@github.com:RengarJS/rengar-admin.git your-project-name

安装依赖 ​

注意

rengar-admin使用了基于pnpm的monorepo架构，所以请使用pnpm进行依赖安装。

bash
pnpm install

启动项目 ​

bash
pnpm dev

打包项目 ​

bash
pnpm build

VSCode 扩展 ​

提示

你无需手动去安装以下扩展，使用vscode打开会提示你安装这些推荐的扩展。

为了体验到更好的开发体验，提供了一些vscode扩展：

  • Vue Official：Vue 官方推荐的语法高亮与类型支持插件，适用于 Vue 3 项目。
  • ESLint：代码规范检查工具，帮助保持代码风格一致。
  • Prettier - Code formatter：代码格式化工具，提升代码可读性。
  • UnoCSS：原子化 CSS 引擎，支持即时按需生成样式。
  • Iconify IntelliSense：为 Iconify 图标库提供智能提示和补全。
  • icones：图标管理与搜索工具，便于快速查找和复制 SVG 图标。
  • EditorConfig for VS Code：统一不同编辑器和 IDE 的代码风格配置。
  • Vue VSCode Snippets：常用 Vue 代码片段，提升开发效率。

最佳实践 ​

提示

首先请阅读一下全部的文档，大致了解一下reangar-admin的功能，为了避免无从下手，可以参照以下步骤修改：

  1. 修改.env.development的VITE_API_URL为你自己的后端 api
  2. 修改src/api/request.ts的请求拦截器initializeRequestInterceptor和响应拦截器initializeResponseInterceptor的方法，改为适用于你的后端 api
  3. 修改src/views/login/index.vue和src/stores/modules/auth.ts中authLoginOutAction的登录参数和相关的后端 api 请求、响应参数，打通登录接口
  4. 修改src/stores/modules/auth.ts中的authDetailAction函数，打通获取用户详情接口，获取用户的id、username和codes，codes为该用户的所有权限的数组结合

因为每个项目接口都不一样，在该方法里整理成rengar-admin所需要的数据格式即可：

ts
async function authDetailAction() {
  const [err, data] = await to(authDetailApi());
  if (err) return Promise.reject(err);
  user.value.id = data.id;
  user.value.username = data.username;
  data.codes.forEach((item) => {
    roleMap.set(item, item);
  });
  return true;
}
  1. logo 修改： public/favicon.ico、src/assets/svg-icons/logo.svg修改为自己的 logo，文件名和格式不能改变
  2. 看看系统设置的菜单、用户、角色能不能满足的需求，能满足修改一下 api，不满足自己手撸吧~
  3. 开始编写其他业务吧