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

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

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


Github地址:https://github.com/anncwb/vue-vben-admin

文档地址:https://vvbin.cn/doc-next/

UI 框架
Tailwind CSS
Ant Design Vue 2.0

准备

  • node 和 git -项目开发环境
  • Vite - 熟悉 vite 特性
  • Vue3 - 熟悉 Vue 基础语法
  • TypeScript - 熟悉TypeScript基本语法
  • 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

2:将代码导入vscode,打开终端,安装依赖

或者可以直接实用Git: - 版本管理工具输入命令安装依赖

我比较习惯第一种。

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

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

cd vue-vben-admin

安装依赖

yarn install


运行

yarn serve

打开浏览器输入http://localhost:3100/

即可登录体验

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

打包

yarn build
相关文章
|
1月前
|
存储 缓存 JavaScript
深入了解 Pinia:现代 Vue 应用的状态管理利器
深入了解 Pinia:现代 Vue 应用的状态管理利器
深入了解 Pinia:现代 Vue 应用的状态管理利器
|
21天前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
21天前
|
JavaScript 前端开发
Vue.js中的状态管理:理解和使用Vuex
Vuex是Vue.js的一个状态管理库,它可以帮助我们更好地管理应用程序的状态。在Vue.js中,组件之间的通信往往需要借助于props和emit来完成,但是当应用程序的状态变得比较复杂时,这种方式就变得比较麻烦。Vuex可以帮助我们更好地管理状态,以及在组件之间共享状态。
|
24天前
|
前端开发
问题解答:SAP UI5 应用设置禁止被其他应用嵌入运行的工作原理解析试读版
问题解答:SAP UI5 应用设置禁止被其他应用嵌入运行的工作原理解析试读版
61 0
|
24天前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
36 0
QGS
|
26天前
|
JavaScript 安全 前端开发
手摸手vue2+Element-ui整合Axios
手摸手vue2+Element-ui整合Axios
QGS
19 0
|
30天前
|
JSON JavaScript 前端开发
【前后端实战项目】Vue.js 和 Egg.js 开发企业级健康管理项目
【前后端实战项目】Vue.js 和 Egg.js 开发企业级健康管理项目
|
30天前
|
存储 JavaScript API
探索 Pinia:简化 Vue 状态管理的新选择(下)
探索 Pinia:简化 Vue 状态管理的新选择(下)
探索 Pinia:简化 Vue 状态管理的新选择(下)
|
30天前
|
存储 JavaScript 前端开发
探索 Pinia:简化 Vue 状态管理的新选择(上)
探索 Pinia:简化 Vue 状态管理的新选择(上)
探索 Pinia:简化 Vue 状态管理的新选择(上)
|
30天前
|
JavaScript
深入理解 Vue.js 中的`mapState`辅助函数:简化状态管理的秘密武器(下)
深入理解 Vue.js 中的`mapState`辅助函数:简化状态管理的秘密武器(下)
深入理解 Vue.js 中的`mapState`辅助函数:简化状态管理的秘密武器(下)

相关产品

  • 云迁移中心