基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行

妖狐艹你老母 2022-09-03 14:19 173阅读 0赞

##### 简介 #####

Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

Github地址：[https://github.com/anncwb/vue-vben-admin][https_github.com_anncwb_vue-vben-admin]  
文档地址：[https://vvbin.cn/doc-next/][https_vvbin.cn_doc-next]

![1f65a8234213890bb00b9f1a6969642a.png][]

![95ea6fd572eabcd998ecddab83143005.png][]

![0232e2ec217b824a82e75b9a6e22faf0.png][]

##### UI 框架 #####

Tailwind CSS
    Ant Design Vue 2.0

##### 准备 #####

*  [node][] 和 [git][] \-项目开发环境
 *  [Vite][] \- 熟悉 vite 特性
 *  [Vue3][] \- 熟悉 Vue 基础语法
 *  [TypeScript][] \- 熟悉`TypeScript`基本语法
 *  [Es6+][Es6] \- 熟悉 es6 基本语法
 *  [Vue-Router-Next][] \- 熟悉 vue-router 基本使用
 *  [Ant-Design-Vue][] \- ui 基本使用
 *  [Mock.js][] \- mockjs 基本语法

##### 特性 #####

最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
    TypeScript: 应用程序级 JavaScript 的语言
    主题：可配置的主题
    国际化：内置完善的国际化方案
    Mock 数据 内置 Mock 数据方案
    权限 内置完善的动态路由权限生成方案
    组件 二次封装了多个常用的组件

##### 插件库 #####

Vue Router Next
    Vuex Next
    vuex-module-decorators - vuex 模块化
    vite-plugin-mock - 基于 vite 的 mock 插件.
    vue-i18n - 国际化
    lodash-es - JavaScript 实用程序库
    moment - 时间操作库
    axios - Http 数据交互
    TypeScript

##### 建议开发环境 #####

Node.js: - 版本最好大于 12.0.0
    yarn > npm > cnpm: - 包管理工具.
    Git: - 版本管理工具
    Visual Studio Code - (VSCode): 最新版本
    ESLint
    Stylelint

##### 安装使用 #####

1：从github上面获取项目代码

git clone https://github.com/anncwb/vue-vben-admin.git

![89be78b2633152b7a5f057116c946041.png][]

2：将代码导入vscode，打开终端，安装依赖  
或者可以直接实用Git: - 版本管理工具输入命令安装依赖  
我比较习惯第一种。

进入到项目文件夹根目录底下，打开终端就直接进入了

如果没有进入，可以使用一下cd命令

cd vue-vben-admin

安装依赖

yarn install

![50cb73d18b45ff66d8f886257a831dcb.png][]

运行

yarn serve

![4e7cc26b10e190cf185d48faf40206b3.png][]

打开浏览器输入[http://localhost:3100/][http_localhost_3100]  
即可登录体验

![a0216c8e1587ced69e05a9c52b21bd9a.png][]

兼容 vue2 的浏览器，一切免费，不收取任何费用，请放心使用。后续定期提供更新及维护，可供参考与学习。

打包

yarn build

[https_github.com_anncwb_vue-vben-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fanncwb%2Fvue-vben-admin
[https_vvbin.cn_doc-next]: https://links.jianshu.com/go?to=https%3A%2F%2Fvvbin.cn%2Fdoc-next%2F
[1f65a8234213890bb00b9f1a6969642a.png]: /images/20220829/7af37752ace94d4b9985d4c5086f0a97.png
[95ea6fd572eabcd998ecddab83143005.png]: /images/20220829/b2758809cf794563942c74e98e842e2b.png
[0232e2ec217b824a82e75b9a6e22faf0.png]: /images/20220829/c823a538359a444cb25135ce44c4058a.png
[node]: https://links.jianshu.com/go?to=http%3A%2F%2Fnodejs.org%2F
[git]: https://links.jianshu.com/go?to=https%3A%2F%2Fgit-scm.com%2F
[Vite]: https://links.jianshu.com/go?to=https%3A%2F%2Fvitejs.dev%2F
[Vue3]: https://links.jianshu.com/go?to=https%3A%2F%2Fv3.vuejs.org%2F
[TypeScript]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.typescriptlang.org%2F
[Es6]: https://links.jianshu.com/go?to=http%3A%2F%2Fes6.ruanyifeng.com%2F
[Vue-Router-Next]: https://links.jianshu.com/go?to=https%3A%2F%2Fnext.router.vuejs.org%2F
[Ant-Design-Vue]: https://links.jianshu.com/go?to=https%3A%2F%2F2x.antdv.com%2Fdocs%2Fvue%2Fintroduce-cn%2F
[Mock.js]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fnuysoft%2FMock
[89be78b2633152b7a5f057116c946041.png]: /images/20220829/e22f5c5b45ab400fa5d96ced7d06d952.png
[50cb73d18b45ff66d8f886257a831dcb.png]: /images/20220829/01d9f93119584d61847214c860312326.png
[4e7cc26b10e190cf185d48faf40206b3.png]: /images/20220829/d1ae330d48514bf8851ca6ad715cd87d.png
[http_localhost_3100]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A3100%2F
[a0216c8e1587ced69e05a9c52b21bd9a.png]: /images/20220829/c6b03beff3ae4331b4a43e5f0a9569ac.png