基于 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
相关文章
|
3月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
257 2
|
2月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
3月前
|
前端开发 JavaScript 开发者
|
3月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
102 41
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
75 1
|
2月前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
216 3
|
2月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
76 1
|
4月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
JavaScript 前端开发 API
|
4月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?

热门文章

最新文章