Vue.js|Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin
简介：Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
文章图片
1.文档地址：https://vvbin.cn/doc-next/
文章图片
2.准备：
node 和 git -项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉TypeScript基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
Ant-Design-Vue - ui 基本使用
Mock.js - mockjs 基本语法
文章图片
3.项目地址
- vue-vben-admin - 完整版
- vue-vben-admin-thin-next - 简化版
文章图片
4.预览：测试账号: vben/123456
- vue-vben-admin - 完整版中文站点
- vue-vben-admin-gh-pages - 完整版 github 站点
- vben-admin-thin-next - 简化版中文站点
- vben-admin-thin-gh-pages - 简化版 github 站点
文章图片
5.特性
- 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
- TypeScript: 应用程序级 JavaScript 的语言
- 主题：可配置的主题
- 国际化：内置完善的国际化方案
- Mock 数据 内置 Mock 数据方案
- 权限 内置完善的动态路由权限生成方案
- 组件 二次封装了多个常用的组件
6.安装使用
- 获取项目代码
git clone https://github.com/anncwb/vue-vben-admin.git
- 安装依赖
cd vue-vben-adminyarn install- 运行
yarn serve
- 打包
yarn build
文章图片
浏览器支持 【Vue.js|Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin】本地开发推荐使用
Chrome 80+ 浏览器推荐阅读
- vue3.0|从零搭建vite + vue3.0 + vuex + router + sass/less + naive
- react-redux|「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）
- 前端自动化打包实践
- echarts|vue-charts的使用（在vue项目中使用echarts）
- javascript|vue 移动端断网后处理
- Vue实现路由懒加载的方式以及打包问题
- 前端|vue数据渲染
- 小程序|实战教程｜数据校验 - 步入高阶开发的必修课
- javascript|精读《useRef 与 createRef 的区别》