FiveAdmin

快速开始

环境准备

注意

  • 本地环境需要安装 Node.js、pnpm 和 Git。
  • 如遇到依赖安装问题请试着将环境按照作者开发时的版本安装。
  • 本项目强制使用 pnpm。如果不想使用pnpm，将 package.json 中的 scripts.preinstall 删除即可。
  • 作者开发环境版本参考
    • Node.js v16.17.0
    • pnpm v8.6.12

开发工具

本项目使用 VsCode 作为开发工具，并对其做了简单的配置在.vscode目录，你可以选择自己熟悉的 IDE。

如果你也使用 VsCode 作为本项目开发工具，为了提高效率和有更好的体验，为您推荐以下插件。

  • Iconify IntelliSense - 图标插件
  • Tailwind CSS IntelliSense - windicss 提示插件
  • I18n-ally - i18n 插件
  • Vue3 Snippets - vue3 代码片段快速生成
  • Volar - vue 开发必备
  • ESLint - 代码检查
  • Element Plus Snippets - ElementPlus 标签快速生成
  • DotENV - .env 文件文本高亮

安装运行

  1. 拉取代码

    git clone https://github.com/zhangyuge7/five-admin.git

  2. 安装依赖（已强制使用 pnpm 作为唯一包管理器）

    pnpm i

  3. 启动项目

    pnpm dev

目录结构

├─mock  # mock文件夹
├─public    # 公共静态资源目录
├─src   # 主目录
│  ├─api    # 接口定义
│  ├─assets # 资源文件
│  │  ├─icons   # icon 图标
│  │  │  └─svg  # icon svg 图标
│  │  ├─images  # 图片
│  │  └─styles  # 样式
│  ├─components # 公共组件
│  ├─directives # 自定义指令
│  ├─hooks  # hook
│  ├─i18n   # 多语言
│  │  ├─lang    # 框架自带语言文本
│  │  └─pages   # 业务页面语言文本
│  ├─layout # 布局
│  │  ├─components  # 布局公共组件
│  │  └─main    # 框架默认提供的布局
│  │      ├─crosswise-layout    # 横向上下布局
│  │      ├─double-aside-layout # 双侧栏布局
│  │      ├─mixture-nav-layout  # 混合布局
│  │      └─single-aside-layout # 单侧栏布局
│  ├─router # 路由
│  │  └─modules # 路由模块
│  ├─stores # Pinia数据仓库
│  │  └─modules #数据仓库模块
│  ├─utils  # 工具类
│  └─views  # 页面
│      ├─error-page #错误页面（404）
│      ├─login  #登录页面
│      └─user-info  #个人信息展示页面
└─vite  #vite配置
    └─plugins #vite插件
Last Updated:
Contributors: zhangyuge