vue3 + elementplus后台管理系统 + vue3核心Api实现 + Vuex4从零实现
所有源码放在github上,方便大家使用和学习。
一、vue3-compositionApi-elementPlus-admin
- 项目只包含框架的搭建,功能的完整封装,不包含任何业务组件。开箱即用。
- 最新版的组合式api + 新版路由 + 新版store的使用
- 采用的是前端保存路由菜单,根据后台返回的角色信息,动态加载路由和菜单渲染
- webpack-dll分离第三方库
- element-plus的全局自定义主题封装
- 如何优雅的全局封装处理svg图标组件
- 全局的自定义指令封装例子(vue3已删除过滤器)
- 全局axios请求响应拦截封装
- 考虑到日常开发处理时间格式化较为常见,使用dayJs封装了大量时间操作函数。(momentjs已停止维护)
二、webpack-vue-cli
- 基于webpack5+ webpack-chain + vue3.0+typescript+webpack-cli4从零搭建的vue3脚手架。
- 可用于学习webpack5 + vue3 + ts的脚手架搭建方案,但也可以直接用于项目!。支持js,jsx,ts,tsx的vue3写法。
三、vue3-vuex-sound-code
- 总共6个tag,以及一个master主分支
- version1.0 版本1. 实现了state和mutation的功能
- version2.0-module 版本2. 递归处理module模块化
- version3.0-no-namespace-store 版本3. 完成了一个没有命名空间的Vuex
- version4.0-namespace-store 版本4. 命名空间版本Vuex
- version5.0-strict-store 版本5. 为Vuex添加严格模式
- version6.0-store-done 版本6. 添加Vuex插件功能,完成开发
- master 最终版. 添加注释以及添加了许多额外的源码功能
- 本源码Vuex4中去掉了无法在组合式Api中使用的mapState等helper函数实现方法,方便注重核心功能。
四、vue3-sound-code
- 帮助你一步步的实现了解Vue3核心组合式api的实现方法
import Vue from '../js/index'
const {
reactive,
shallowReactive,
readonly,
shallowReadonly,
effect,
ref,
shallowRef,
toRef,
toRefs,
computed,
} = Vue