《vue3+ts+element-plus后台管理系统系列⼀》之简介
vue3-composition-admin 是⼀个管理端模板解决⽅案，它是基于vue3,ts和element-plus，项⽬都是以composition api风格编写。
简介
项⽬的基础版本出⾃于源于花裤衩⼤佬的 vue-element-admin。
版本：
vue2+js版本：
vue2+ts版本：
vue3 发布之后，性能增强，速度vue2的倍数，打包体积都在减⼩（treeshaking），composition api 增加了项⽬可读性。
项⽬⽬的：
保持技术的先进性，跟上技术发展
作为公司定制组件的代码demo集合
解决⽅案集合
统⼀技术标准
功能
- 登录（视频背景）
- 注销
- 权限验证
- 页⾯权限
- 指令权限
- 权限配置
- ⼆步登录
-
多环境发布 (对应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(剪贴复制)
⽬录结构
├─ .env.dev.build    # 开发环境
├─ .env.dev.serve    # 开发本地本地
├─ .env.prod.build    # ⽣产环境
├─ .env.prod.serve    # ⽣产环境本地
├─ .st.build    # 测试环境
├─ .st.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        # 插件
vue element admin│├─ router          # 路由
│├─ store          # 全局store管理
│├─ styles          # 全局样式
│├─ utils          # 全局公共⽅法
│└─ views          # 所有业务页⾯
├─ tsconfig.json      # ts 编译配置
└─ fig.js      # vue-cli 配置
HighLight
项⽬均已最新技术实现，Vue3配套升级全家桶和涉及的插件组件等项⽬采⽤技术:
vue3 + composition api
typescript3.9
sass (dart sass)
vue next 系列:
Document
Setup
项⽬主要是前端和mock server（node）
前后端都启动
yarn
yarn start
or
npm install
npm run start
单独启动 Mock
后台模拟服务器和其他版本不同，采⽤koa2+Faker进⾏模拟。
启动mock server:
yarn mock
or
npm run mock
单独启动 vue admin
yarn  serve:dev
or
npm run 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 .st.serve vue-cli-service serve", "build:test":"cross-env NODE_ENV=production  dotenv -e .st.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
or
npm run lint
提交⾃动检测：
"gitHooks":{
"pre-commit":"lint-staged"
},
"lint-staged":{
"*.{js,jsx,vue,ts,tsx}":[
"vue-cli-service lint",
"git add"
]
}
Browsers support
Modern browsers and Internet Explorer 10+.
IE / Edge Firefox Chrome Safari IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。