基于 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
相关文章
|
4天前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
2月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
64 1
|
3月前
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
|
3月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
49 0
|
3月前
|
设计模式 前端开发 开发者
Angular携手Material Design:探索设计模式下的UI组件开发之道——从按钮到对话框的全面实战演示
【8月更文挑战第31天】在现代Web应用开发中,Angular框架结合Material Design设计原则与组件库,显著提升了用户界面的质量与开发效率。本文通过具体代码示例,详细介绍如何在Angular项目中引入并使用Material Design的UI组件,包括按钮、表单和对话框等,帮助开发者快速构建美观且功能强大的应用。通过这种方式,不仅能提高开发效率,还能确保界面设计的一致性和高质量,为用户提供卓越的体验。
31 0
|
3月前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
|
4月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
138 1
|
3月前
|
JavaScript
VUE——配置本地运行指定不同环境
VUE——配置本地运行指定不同环境
86 0
|
Web App开发 JavaScript 前端开发
Vue框架快速入门
Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国人,中文文档也很完善。当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
1339 0