ZY/vue3 |
您所在的位置：网站首页 › 花裤衩子头像 › ZY/vue3 |
ZY/vue3
|
vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。 简介项目的基础版本出自于源于花裤衩大佬的 vue-element-admin。 版本： vue2+js版本：vue-element-admin vue2+ts版本：vue-typescript-admin-template vue3 发布之后，性能增强，速度vue2的倍数，打包体积都在减小（treeshaking），composition api 增加了项目可读性。 项目目的： 学习vue3+ts 保持 composition api 风格在线demo演示地址：https://admin-tmpl-test.rencaiyoujia.cn/ 相关项目 基于该项目RuoYi-Vue3 (后端路由案例) 微应用乾坤版本RuoYi-Vue3-qinkun 国内gitee版本 vue3-composition-admin 功能 - 用户管理 - 登录（视频背景） - 注销 - 权限验证 - 页面权限 - 指令权限 - 权限配置 - 二步登录 - 多环境发布 (对应serve,build) - dev - test - prod - 全局功能 - iconfont - 国际化多语言 - 多种动态换肤 - 动态侧边栏（支持多级路由嵌套） - 动态面包屑 - 快捷导航(标签页) - 本地/后端 mock 数据 - Screenfull全屏 - 自适应收缩侧边栏 - 编辑器 - 富文本 - Excel - 导出excel - 导入excel - 前端可视化excel - 导出zip - 表格 - 动态表格 - 拖拽表格 - 内联编辑 - 错误页面 - 401 - 404 - 組件 - 头像上传 - 返回顶部 - 拖拽Dialog - 拖拽Select - 拖拽看板 - 列表拖拽 - Dropzone - Sticky - CountTo (to do) - 综合实例 - 错误日志 - Dashboard - 引导页 - ECharts 图表 - Clipboard(剪贴复制) 目录结构 admin-tmpl ├─ .env.dev.build # 开发环境 ├─ .env.dev.serve # 开发本地本地 ├─ .env.prod.build # 生产环境 ├─ .env.prod.serve # 生产环境本地 ├─ .env.test.build # 测试环境 ├─ .env.test.serve # 测试环境本地 ├─ .eslintrc.js # eslint ├─ README.md ├─ dist # 打包dist ├─ mock # mock服务 ├─ public # 静态资源 ├─ src # 源码 │ ├─ @types # ts 声明 │ ├─ apis # 接口请求 │ ├─ assets # webpack打包的资源 │ ├─ components # 公共组件 │ ├─ config # 全部配置 │ ├─ constant # 常量 │ ├─ directives # 全局指令 │ ├─ layout # 全局Layout │ ├─ locales # 国际化 │ ├─ model # 全部model存放 │ ├─ plugins # 插件 │ ├─ router # 路由 │ ├─ store # 全局store管理 │ ├─ styles # 全局样式 │ ├─ utils # 全局公共方法 │ └─ views # 所有业务页面 ├─ tsconfig.json # ts 编译配置 └─ vue.config.js # vue-cli 配置 HighLight项目均已最新技术实现，Vue3配套升级全家桶和涉及的插件组件等 项目采用技术: vue3 + composition api typescript3.9 sass (dart sass) echats5vue next 系列: element-plus vue-router-next vuex-4.0 vue-i18n-next Document 博客文档地址 文档地址 文档项目git地址 Setup项目主要是前端和mock server（node） 前后端都启动 yarn yarn start 单独启动 Mock后台模拟服务器和其他版本不同，采用koa2+Faker进行模拟。 Koa2 Faker启动mock server: yarn mockmock 需要部署到服务器，单独项目地址：https://github.com/rcyj-FED/admin-tmpl-mock mock在线测试地址：https://admin-tmpl-mock-test.rencaiyoujia.cn/ 单独启动 vue admin yarn serve:dev多环境命令查看package.json script: "serve:dev": "cross-env NODE_ENV=development dotenv -e .env.dev.serve vue-cli-service serve", "build:dev": "cross-env NODE_ENV=production dotenv -e .env.dev.build vue-cli-service build", "serve:test": "cross-env NODE_ENV=development dotenv -e .env.test.serve vue-cli-service serve", "build:test": "cross-env NODE_ENV=production dotenv -e .env.test.build vue-cli-service build", "serve:prod": "cross-env NODE_ENV=development dotenv -e .env.prod.serve vue-cli-service serve", "build:prod": "cross-env NODE_ENV=production dotenv -e .env.prod.build vue-cli-service build", eslint yarn lint提交自动检测： "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,jsx,vue,ts,tsx}": [ "vue-cli-service lint", "git add" ] } Browsers supportModern browsers and Internet Explorer 10+.  IE / Edge
 Firefox
 Chrome
 Safari
IE10, IE11, Edge
last 2 versions
last 2 versions
last 2 versions
讨论交流（QQ群：584617908）
MIT Copyright (c) 2021-present |
【本文地址】