vue3 + elementplus后台管理系统 + vue3核心Api实现 + Vuex4从零实现_vue3 + javascript + elementplus后台框架教程

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16