xiaohubai / vue-ts-layout Goto Github PK

⭐️ 基于 Vue3 + TypeScript + Vite + Element-Plus + Pinia 开箱即用的企业级开发模板

Home Page: https://xiaohubai.github.io/vue-ts-layout

HTML 0.74% TypeScript 39.23% Vue 57.24% SCSS 0.10% JavaScript 2.59% Makefile 0.09%

axios composition-api element-plus pinia scss typescript vite4 vue-router4 vue3 vite-plugin-mock i18n mock docker-compose eslint

vue-ts-layout's Introduction

介绍

vue-ts-layout 是一个前端模板，它基于 Vite4.x、Vue3.x、Vue-router4.x、Pinia、Element-plus、TypeScript 实现。它使用了最新的前端技术栈，内置了 vue-i18n 国际化解决方案，动态路由，提炼了典型的业务模型,它可以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 Vue3、Vite、Ts 等主流技术。

安装

$ git clone https://github.com/xiaohubai/vue-ts-layout.git
$ cd vue-ts-layout
$ pnpm install
$ pnpm run dev

使用说明

├── README.md
├── deploy                      //部署
│   ├── Makefile                //make指令
│   ├── docker-compose.yml      //docker-compose.yml
│   └── volumes                 //挂载目录
├── mock                        //mock
│   ├── index.ts                //mock对象
│   ├── mockProdServer.ts       //生产环境配置
│   └── modules                 //mock对象实际接口
├── public                      //静态资源
│   └── favicon.svg             //网址图标
├── src                         //内部实现
│   ├── App.vue                 //监听语言配置,实时更改i8n和element-plus语言
│   ├── api                     //api接口
│   ├── assets                  //资源
│   ├── i18n                    //i8n
│   │   ├── en.json             //定义英文
│   │   ├── index.ts            //实例i8n
│   │   └── zh.json             //定义中文
│   ├── layout                  //布局
│   │   ├── components          //组件
│   │   │   ├── aside           //侧边栏
│   │   │   │   ├── index.vue   //logo和首层路由
│   │   │   │   └── submenu.vue //多级路由
│   │   │   ├── footer          //页脚
│   │   │   │   └── index.vue
│   │   │   ├── header                      //header
│   │   │   │   ├── breadcrumb.vue          //面包屑(多级链路)
│   │   │   │   ├── collapse.vue            //控制折叠
│   │   │   │   ├── index.vue               //header布局
│   │   │   │   ├── notice.vue              //即时消息
│   │   │   │   ├── profile.vue             //头像和个人中心
│   │   │   │   └── tabs-breadcrumb.vue     //tab面包屑
│   │   │   └── setting                     //布局的个性化设置
│   │   │       └── index.vue
│   │   └── index.vue                       //整体布局
│   ├── main.ts                             //业务入口
│   ├── permission.ts                       //路由拦截器
│   ├── pinia                               //store
│   │   ├── index.ts                        //pinia实例
│   │   └── modules
│   │       ├── dict.ts                     //字典序
│   │       ├── router.ts                   //动态路由
│   │       ├── setting.ts                  //设置
│   │       └── user.ts                     //用户基本信息和token
│   ├── router                              //基本路由和白名单
│   │   └── index.ts
│   ├── style                               //样式
│   │   └── index.scss
│   ├── utils                               //工具
│   │   ├── asyncRouter.ts                  //导入路由的component文件路径
│   │   ├── pageTitle.ts                    //网址标题
│   │   └── request.ts                      //axios封装
│   └── views                               //页面
├── index.html                              //访问入口
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── vite.config.ts                          //vite配置