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 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第1张图片
1.文档地址:https://vvbin.cn/doc-next/
Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第2张图片
2.准备:
node 和 git -项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉TypeScript基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
Ant-Design-Vue - ui 基本使用
Mock.js - mockjs 基本语法
Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第3张图片

3.项目地址

  • vue-vben-admin - 完整版

  • vue-vben-admin-thin-next - 简化版
    Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第4张图片
    4.预览:测试账号: vben/123456

  • vue-vben-admin - 完整版中文站点

  • vue-vben-admin-gh-pages - 完整版 github 站点

  • vben-admin-thin-next - 简化版中文站点

  • vben-admin-thin-gh-pages - 简化版 github 站点
    Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第5张图片
    5.特性

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发

  • TypeScript: 应用程序级 JavaScript 的语言

  • 主题:可配置的主题

  • 国际化:内置完善的国际化方案

  • Mock 数据 内置 Mock 数据方案

  • 权限 内置完善的动态路由权限生成方案

  • 组件 二次封装了多个常用的组件
    6.安装使用

  • 获取项目代码

git clone https://github.com/anncwb/vue-vben-admin.git
  • 安装依赖
cd vue-vben-admin

yarn install

  • 运行
yarn serve
  • 打包
yarn build

Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin_第6张图片

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

你可能感兴趣的