<p align="center">
<img alt="JeeSite" src="https://jeesite.com/assets/images/logo.png" width="120" height="120" style="margin-bottom: 10px;">
</p>
<h3 align="center" style="margin:30px 0 30px;font-weight:bold;font-size:30px;">JeeSite Vue3 前端框架</h3>
<p align="center">
<a href="https://v3.cn.vuejs.org/" target="__blank"><img alt="TypeScript-Vue3" src="https://img.shields.io/badge/TypeScript-Vue3-green.svg"></a>
<a href="https://www.antdv.com/" target="__blank"><img alt="Ant Design Vue-4.0" src="https://img.shields.io/badge/Ant Design Vue-4.0-blue.svg"></a>
<a href="https://jeesite.com" target="__blank"><img alt="JeeSite-Vue" src="https://img.shields.io/badge/JeeSite-5.6-blue.svg"></a>
<a href="https://gitee.com/thinkgem/jeesite-vue/stargazers" target="__blank"><img alt="star" src="https://gitee.com/thinkgem/jeesite-vue/badge/star.svg?theme=dark"></a>
<a href="https://gitee.com/thinkgem/jeesite-vue/members" target="__blank"><img alt="fork" src="https://gitee.com/thinkgem/jeesite-vue/badge/fork.svg?theme=dark"></a>
</p>
## 技术交流
* 交流 QQ 群(千人大群):`127515876`、`209330483`、`223507718`、`709534275`、`730390092`、`1373527`、`183903863(外包)`
* 码云Gitee:<https://gitee.com/thinkgem/jeesite-vue>
* GitHub:<https://github.com/thinkgem/jeesite-vue>
* 作者博客:<https://my.oschina.net/thinkgem>
* **帮助文档:**<http://docs.jeesite.com>
* 官方网站:<http://jeesite.com>
* 问题反馈:<http://jeesite.net> [【新手必读】](https://gitee.com/thinkgem/jeesite-vue/issues/I18ARR)
* 关注微信公众号,了解最新动态:
![JeeSite微信公众号](https://images.gitee.com/uploads/images/2020/0727/091951_a3ab258c_6732.jpeg "JeeSite微信公众号")
## 框架介绍
基于 Vue3、Vite、Ant-Design-Vue、TypeScript、Vue Vben Admin,最先进的技术栈,让初学者能够更快的入门并投入到团队开发中去。包括模块如:组织机构、角色用户、菜单授权、数据权限、系统参数等。强大的组件封装,数据驱动视图。为微小中大型项目的开发,提供现成的开箱解决方案及丰富的示例。
在 Vben Admin 基础上做的改进:
* 更精致的界面细节优化改进,非常适合信息化管理后台
* 主题风格改进,不同的布局风格,菜单及权限体验优化
* 顶部菜单、分隔菜单、混合菜单的活动状态激活和加载优化改进
* 树表支持异步的封装,提升展开折叠性能,支持按层次展开折叠树表
* 树结构新增快捷刷新、动态生成树、层次独立和不独立的数据返回兼容
* 增加左树右表功能展示,可折叠左树,树组件增加默认图标
* 表单组件适应各种数据格式来源,特别是多选字符串到数组的互转兼容
* 表单新增各种便捷属性和表单组件,下拉框和树选择支持标签名回显
* 表单组件,改进折叠表单 Action 的算法,智能化布局
* 表格组件,Action 更多,支持横向显示操作,更方便
* 表格组件,子表编辑改进,表格列排序和重置改进优化
* 新增字典组件,支持展示到表格列、表单组件下拉框单选框等
* 字典标签支持 Tag、Badge、自定义 class、style 等,显示风格
* 更方便的支持 Tab 页面的缓存,切换页签的时候不重载页面内容
* Tab 页签界面美化、图标显示、任何标签上右键,可快速刷新等等
* 全局 Axios 改进,兼容各种数据格式,超时消息提醒改进
* 功能权限鉴权改进,并兼容本地路由和后台路由同时使用
* 等等各种细节改进,体验优化,黑暗布局细节优化
* Vue端完全开源,用上你就会爱上,实在太方便了
## 设计特点
定义众多组件,非常贴心的组件属性及小功能,符合 JeeSite 以往的设计思想,列表和表单以数据驱动视图,极大简化了业务功能开发,注释分解详见本页最下【源码解析】
为什么做数据驱动视图?前端向下兼容一直是最大的问题,有了一套相应的标准,会对框架升级帮助很大。比如你可以非常小的成本,业务代码改动非常小的情况下,去升级前端;数据驱动视图可以为未来自定义拖拽表单做更好的铺垫,数据存储结构更清晰化,更利于维护。
提示:请仔细阅读源码解析,表单视图和列表视图上的注释哦,复杂表单可以多表单联合使用。
## 演示地址
1. 地址:<http://vue.jeesite.com/>
## 学习准备
- [VSCode](https://code.visualstudio.com/) - 推荐 IDE 集成开发工具
- [Node.js 18](https://nodejs.org/dist/latest-v18.x/) 和 [git](https://git-scm.com/) - 开发环境
- [Vite](https://vitejs.dev/) - 熟悉 Vite 特性
- [Vue-v3](https://cn.vuejs.org/) - 熟悉 Vue 基础语法
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 TS 基本语法
- [ES6+](http://es6.ruanyifeng.com/) - 熟悉 ES6 基本语法
- [Vue-Router-v4](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
- [Vue-Vben-Admin](https://jeesite.com/front/vben-admin/) - 熟悉 UI 及表单列表及常用组件使用
- [Ant-Design-Vue](https://antdv.com/components/overview-cn/) - 熟悉 UI 基本使用
## 安装使用
- 如果没有安装 Node.js 18+,下载地址:<https://nodejs.org>
```bash
# 验证
node -v
```
- 如果没有安装 Yarn 执行安装(要求 Yarn v1.x)
```bash
npm i -g yarn
# 验证
yarn -v
```
- 获取代码
```bash
git clone https://gitee.com/thinkgem/jeesite-vue.git
cd jeesite-vue
```
注意:不要放到中文或带空格的目录下。
- 安装依赖
```bash
yarn config set registry https://registry.npm.taobao.org
yarn install
```
- 开发环境运行访问(方式一)
```bash
yarn serve
```
开发环境会加载文件较多,便于调试,请耐心等待。
- 编译打包后运行访问(方式二)
```bash
yarn preview
```
编译打包后,会整合这些文件,所以访问性能会大大提高,生产环境可以开启 gzip
- 打包发布程序
```bash
yarn build
```
打包完成后,会在根目录生成 dist 文件夹,发布 nginx。
详见文档:<https://jeesite.com/docs/vue-install-deploy/#部署到正式服务器>
### 后端服务
- 安装后台服务 [JeeSite v5.x](https://gitee.com/thinkgem/jeesite4/tree/v5.6/)
- 打开 [.env.development](https://jeesite.com/docs/vue-settings/#env-development-详解) 文件,修改后台接口:
```bash
# 代理设置,可配置多个,不能换行,格式:[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]
# 访问接口的根路径(例如:https://vue.jeesite.com)
VITE_GLOB_API_URL =
# 访问接口的前缀,在根路径之后
VITE_GLOB_API_URL_PREFIX = /js
```
### 如果您使用的 VSCode 的话,推荐安装以下插件:
* [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Iconify 图标插件
* [windicss IntelliSense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - windicss 提示插件
* [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) - i18n 插件
* [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue3 开发必备(Vetur禁用)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化
* [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化
* [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件高亮
## 常见问题
* Vue 版本的浏览器支持情况:支持所有现代浏览器,Vue3 已不再支持 IE 浏览器。
* 为什么使用抽屉作为表单�
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】: 所有源码都经过严格测试,可以直接运行。 功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说,可以在这些基础代码上进行修改和扩展,实现其他功能。 【沟通交流】: 有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 鼓励下载和使用,并欢迎大家互相学习,共同进步。
资源推荐
资源详情
资源评论
收起资源包目录
基于 Vue3、Vite、Ant-Design-Vue3、TypeScript、Vue Vben Admin,最先进.zip (724个子文件)
startup.bat 11B
layer.css 15KB
codemirror.css 9KB
index.css 2KB
.env.development 858B
.editorconfig 257B
.env 205B
.eslintignore 99B
loading-0.gif 6KB
loading-2.gif 2KB
loading-1.gif 701B
.gitignore 303B
index.html 2KB
header.jpg 15KB
layer.js 49KB
.eslintrc.js 2KB
stylelint.config.js 2KB
prettier.config.js 396B
ecosystem.config.js 370B
postcss.config.js 62B
package.json 6KB
settings.json 4KB
tsconfig.json 1KB
package.json 981B
extensions.json 368B
tsconfig.json 331B
launch.json 252B
nodemon.json 137B
btn.less 8KB
menu.less 7KB
index.less 5KB
index.less 4KB
color.less 4KB
index.less 2KB
pagination.less 2KB
index.less 2KB
table.less 2KB
theme.less 2KB
index.less 1KB
fade.less 1KB
index.less 1KB
scroll.less 863B
public.less 855B
easing.less 843B
breakpoint.less 800B
slide.less 557B
index.less 508B
zoom.less 463B
input.less 462B
index.less 356B
scale.less 293B
base.less 280B
index.less 270B
config.less 72B
LICENSE 13KB
yarn.lock 547KB
yarn.lock 123KB
README.md 10KB
ISSUE_TEMPLATE.zh-CN.md 364B
README.md 189B
pwa-512x512.png 40KB
demo.png 33KB
mp.png 17KB
icon.png 14KB
pwa-192x192.png 8KB
logo.png 7KB
logo.png 7KB
icon-ext.png 6KB
favicon.png 5KB
.prettierignore 72B
.env.production 1014B
startup.sh 21B
.stylelintignore 27B
illustration.svg 54KB
dynamic-avatar-3.svg 31KB
net-error.svg 25KB
dynamic-avatar-1.svg 22KB
dynamic-avatar-5.svg 21KB
dynamic-avatar-6.svg 19KB
dynamic-avatar-2.svg 19KB
dynamic-avatar-4.svg 18KB
no-data.svg 10KB
login-box-bg.svg 9KB
sun.svg 4KB
visit-count.svg 3KB
p-rotate.svg 3KB
unrotate.svg 3KB
total-sales.svg 3KB
test.svg 2KB
transaction.svg 2KB
download-count.svg 2KB
login-bg-dark.svg 1KB
login-bg.svg 1KB
scale.svg 1KB
moon.svg 1KB
full-1.svg 1KB
full-2.svg 1KB
unscale.svg 1KB
resume.svg 996B
close.svg 560B
共 724 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
妄北y
- 粉丝: 2w+
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 上课教材ppt-数据库系统原理及MySQL应用教程(第二版)课件.zip
- usb gadget 学习资料
- 智能毕设项目开发基础教程
- 实用脚本工具:自动化编程基础教程
- LabVIEW编程入门与实践基础教程
- 嵌入式开发入门与实践基础教程
- JFinal-Python资源
- 胆小菇 Python Selenium 爬虫入门:批量将豆瓣书影标记设置为"仅自己可见"
- bboss-plugins-kafka
- iotucy-websocket
- 胆小菇 Python Selenium 爬虫入门:批量将豆瓣书影标记设置为"仅自己可见"
- StudentManageSystem-建立学生信息链表
- Sa-Token-java
- 基于Atlas 200I DK A2研究的机械臂目标检测系统-注意力机制
- ga_network_reconfiguration-遗传算法
- tomcat-tomcat
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功