介绍

open in new window open in new window open in new window open in new window open in new window open in new window open in new window

Vusui-admin-templateopen in new window 是基于 Vite3 + Vue3 + TypeScript 来重构的。如果喜欢就点个 ★Staropen in new window 吧。

开源不仅是分享，也是协作，通过社区的力量解决问题，促进发展。期待你的参与！

【源码下载open in new window】 | 【在线演示open in new window】

npm 配置

# 配置源 npm
npm config set registry https://registry.npm.taobao.org

yarn 配置

# 安装 yarn
npm install -g yarn --registry=https://registry.npm.taobao.org

# 配置源 yarn
yarn config set registry https://registry.npm.taobao.org

安装

# 克隆项目
git clone https://github.com/vusui/vusui-admin-template.git

# 进入项目目录
cd vusui-admin-template

# 安装依赖(推荐使用 yarn)
yarn install

# 本地开发 启动项目
yarn dev

💡 提示

启动完成后会自动打开浏览器访问 http://localhost:1995 当看到下面的页面就代表安装成功了。

目录结构

💡 提示

本项目是一个极简的开发框架，不集成其它过多的功能，下面是整个项目的目录结构。

┌─ .vscode                        + vscode工具目录
│ ├─ extensions.json                * extensions.json
├─ mock                           + mockjs资源目录
│ ├─ index.ts                       * mock入口配置文件
│ ├─ source                         + mock源文件目录
├─ public                         + 静态资源目录
├─ src                            + 项目主目录
│ ├─ app                          + 项目布局(主要)
│ │ ├─ components                   + 布局组件目录
│ │ │ ├─ header                       + Header导航栏相关组件
│ │ │ │ ├─ breadcrumb.vue               * 面包屑
│ │ │ │ ├─ index.vue                    * Header主文件
│ │ │ │ ├─ setting.vue                  * 右侧设置栏(主题设置)
│ │ │ │ └─ user.vue                     * 用户信息(对像、名称等)
│ │ │ ├─ main                         + 内容视图主体
│ │ │ │ └─ index.vue                    * router-view
│ │ │ ├─ sidebar                      + 侧边菜单栏
│ │ │ │ ├─ index.vue                    * 主文件
│ │ │ │ ├─ sidebar-item.vue             * 菜单Item
│ │ │ │ ├─ sidebar-link.vue             * 菜单Link
│ │ │ │ └─ sidebar-logo.vue             * 菜单Logo
│ │ │ └─tags                         + 标签栏
│ │ │   ├─ index.vue                 * 主文件
│ │ │   └─ scroll-pane.vue           * 标签滚动条组件
│ │ └─ index.vue                    * 布局入口文件
│ ├─ assets                       + 静态资源目录（如图片、视频等）
│ │ └─ icons                        + SVG图标存放目录
│ ├─ common                       + 公共文件存放目录
│ │ ├─ api                          + 接口调用文件目录
│ │ ├─ config                       + 项目配置文件目录
│ │ ├─ directive                    + 自定义指令目录
│ │ ├─ request                      + 网络请求配置目录
│ │ ├─ setting                      + 系统设置文件目录
│ │ └─ utils                        + 公共函数/工具文件目录
│ ├─ components                   + 组件文件存放目录
│ ├─ router                       + 路由配置文件目录
│ │ └─ permission.ts                * 路由守卫配置文件
│ ├─ store                        + 状态管理文件目录
│ ├─ styles                       + CSS/SCSS/LESS等样式文件存放目录
│ ├─ types                        + 自定义TS类型文件目录
│ ├─ views                        + 业务页面文件存放的目录
│ │ ├─ public                       + 公共页面目录
│ │ ├─ index
│ │ │  └─ index.vue                 * index页面
│ │ └─ login
│ │  │ └─ login.vue                 * login页面
│  ......
│ ├─ App.vue                      * 应用配置，用来配置App全局样式以及监听
│ └─ main.ts                      * vue初始化入口文件
├─ .env.development               * 开发环境配置文件
├─ .env.production                * 生产环境配置文件
├─ .eslintignore                  * 不需要eslint校验文件
├─ .eslintrc.cjs                  * eslint配置文件
├─ .gitignore                     * git提交时需要忽略的文件
├─ .prettierrc.cjs                * prettier的格式化配置文件
├─ index.html                     * html模板
├─ babel.config.js                * babel的配置文件
├─ package.json                   * 项目模块和配置
├─ README.md                      * 项目入门手册（必读）
├─ tsconfig.json                  * typeScript配置文件
├─ tsconfig.node.json             * typeScript node配置文件
└─ vite.config.ts                 * vite配置文件