vue-manage-system升级到vue3的开发总结分析

目录
  • 前言
  • 按需导入
  • 组件的 name 选项
  • pinia
  • 权限管理
  • Typescript
  • 总结

前言

近期抽了点时间,对 vue-manage-system 这个项目进行了升级,从 vue2 升级到 vue3、 elementplus、vite、pinia、typescript。这也是对此次升级做了一些细节方面的总结吧。

按需导入

Elment plus 功能较多,但是在项目中并用不到这么多,此时需要按需导入,安装 unplugin-vue-components 和 unplugin-auto-import这两款插件,在 vite.config.ts 中配置插件

插件会自动导入 element plus,因此在 main.ts 中不再需要手动导入,否则插件的按需导入将不生效。

// import ElementPlus from 'element-plus';
// import 'element-plus/dist/index.css';
// app.use(ElementPlus);

组件的 name 选项

在项目中通过 <KeepAlive> 内置组件的 include prop 来缓存组件实例,它会根据组件的 name 选项进行匹配,因此必须显式声明一个 name 选项。在 vue2 中使用选项式api开发时可以很简单的设置 name 选项,在 vue3 中使用组合式api,便不能同选项式api一样了。在 3.2.34 或以上的版本中,使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项,无需再手动声明。不过我们想要自定义组件 name ,可以使用 vite-plugin-vue-setup-extend 插件。在 vite.config.ts 中加上配置

import VueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
  plugins: [
    // ...
    VueSetupExtend()
  ],
})

便可在 vue 单文件中定义 name 选项了

<script setup lang="ts" name="table">
...
</script>

pinia

在项目中用 pinia 来替代 vuex,它也是一个跨组件/页面共享状态的存储库,与 Vuex 相比,不再需要 mutations,使用起来更加方便。

// sidebar.ts
import { defineStore } from 'pinia';
export const useSidebarStore = defineStore('sidebar', {
	state: () => {
		return {
			// 控制侧边栏的折叠
			collapse: false
		};
	},
	actions: {
		handleCollapse() {
			this.collapse = !this.collapse;
		}
	}
});
// header.vue
import { useSidebarStore } from '../store/sidebar';
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
	sidebar.handleCollapse();
};

权限管理

在项目中,不同的角色对应不同的权限,低权限的角色,无法进入高权限的页面,通过vue自定义指令来实现入口的隐藏。 使用pinia来管理当前用户的权限,并在页面刷新时从本地存储中获得,以免刷新后数据丢失

// permiss.ts
import { defineStore } from 'pinia';
interface ObjectList {
	[key: string]: string[];
}
export const usePermissStore = defineStore('permiss', {
	state: () => {
		const keys = localStorage.getItem('ms_keys');
		return {
			key: keys ? JSON.parse(keys) : <string[]>[],
			defaultList: <ObjectList>{
				admin: ['1', '2', '3', '4', '5],
				user: ['1', '2']
			}
		};
	},
	actions: {
		handleSet(val: string[]) {
			this.key = val;
		}
	}
});

在用户登录之后,根据用户角色来获取对应权限(此处为本地示例项目,权限未从服务器获取)

// login.vue
const permiss = usePermissStore();
const submitForm = (formEl: FormInstance | undefined) =&gt; {
	// ....
	const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
	permiss.handleSet(keys);
	localStorage.setItem('ms_keys', JSON.stringify(keys));
};

在自定义指令中,对不在权限中的节点进行隐藏,在CSS中设置带hidden属性的display为none即可简单实现

// main.ts
const permiss = usePermissStore();
app.directive('permiss', {
	mounted(el, binding) {
		if (!permiss.key.includes(String(binding.value))) {
			el['hidden'] = true;
		}
	}
});

在侧边导航元素加上 v-premiss="xx" 即可实现不同权限的显示与隐藏。

Typescript

原先自己对Typescript也没有多大的兴趣,在自己项目中使用了之后,逐渐有了兴趣,发现还挺好用的,类型推断,自动提示,错误提示等都挺不错的。不过自己用的也是比较简单,还需要再深入学习。

总结

由于该项目中不包含任何业务代码,所以还是相对比较简单的,不过从开发中还是积累了一些经验,在其它项目中可以更加熟练地开发。自己在维护项目的同时,有认真的想过了,每个产品都要有自己的定位,而我对这个产品的定位就是要足够简单,又能满足管理后台快速开发的需求,以便外包项目快速完成,因此我不需要太多花里胡哨的功能,而且还削减了部分功能,比如i18n国际化。如果有什么好的建议,可以开 issue 一起讨论。项目地址:vue-manage-system

以上就是vue-manage-system升级到vue3的开发总结分析的详细内容,更多关于vue-manage-system升级vue3的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3.2自定义弹窗组件结合函数式调用示例详解

    目录 前言 手写弹窗组件 组件调用 函数式调用 如何使用 含样式完整源码 效果图 前言 涉及的vue3知识点/API,createApp defineProps defineEmits <script setup> v-model <script setup> 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件 很简单的弹窗组件,支持设置标题 <script setup> def

  • Vue3 如何通过虚拟DOM更新页面详解

    目录 引言 Vue 虚拟 DOM 执行流程 DOM 的创建 patch 函数 patchElement 函数 节点自身属性的更新 子元素的更新 patchChildren 位运算 为什么位运算性能更好 如何运用位运算 最长递增子系列 贪心 + 二分 引言 上一讲我们主要介绍了 Vue 项目的首次渲染流程,在 mountComponent 中注册了effect 函数,这样,在组件数据有更新的时候,就会通知到组件的 update 方法进行更新 Vue 中组件更新的方式也是使用了响应式 + 虚拟 DO

  • Vue3.0版本强势升级点特性详解

    目录 一.Composition API: 组合API/注入API 二.自定义渲染API(Custom Renderer API) vue2.x架构问题 三.更先进的组件 Fragment组件 Suspense组件 四.更好的TS支持 五.更快的开发体验(vite开发构建工具) 六.按需编译,体积比Vue2.x更小(Tree shaking) 七.性能比2.x快1.2-2倍 diff算法的优化 render阶段的静态提升(render阶段指生成虚拟dom树的阶段) 事件侦听缓存 减少创建组件实例

  • vue3.2 Composition API项目依赖升级

    目录 第一次Composition API 思考setup 最常见的问题,忘记写.value style v-bind 的优缺点 pinia or not 第一次Composition API 在vue3.2中,正式支持了script setup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法. 在vue3.2之前,一般会这样写. <script> export default { setup(props,ctx){ const a = re

  • 详解vue3中如何使用youtube-player

    目录 正文 开始使用 做成组件youtubePlayer 使用方式 注意事项 常用参数 常用API 正文 youtube-player 是 YouTube IFrame Player API (YIPA) 的封装.可以在自己网站上播放YouTube视频. 开始使用 使用 npm 下载 npm i youtube-player 做成组件youtubePlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } fr

  • 详解vue3中如何使用shaka-player

    目录 正文 开始使用 做成组件shakaPlayer 使用方式 注意事项 正文 Shaka Player 是谷歌公司对外开源的一款 JavaScript 类库,详细请看谷歌官方API文档. 开始使用 我们可以使用 npm 下载 npm i shaka-player 做成组件shakaPlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } from "vue"; import shaka

  • vue-manage-system升级到vue3的开发总结分析

    目录 前言 按需导入 组件的 name 选项 pinia 权限管理 Typescript 总结 前言 近期抽了点时间,对 vue-manage-system 这个项目进行了升级,从 vue2 升级到 vue3. elementplus.vite.pinia.typescript.这也是对此次升级做了一些细节方面的总结吧. 按需导入 Elment plus 功能较多,但是在项目中并用不到这么多,此时需要按需导入,安装 unplugin-vue-components 和 unplugin-auto-

  • Vue3 + TypeScript 开发总结

    目录 Vue3 + TypeScript 学习 一, 环境配置 1.1 安装最新 Vue 脚手架 1.2 创建Vue3 项目 二, 进击Vue3 2. 1 Vue 2 局限性 2.2 Vue 3 如何解决Vue 2 局限 三,Vue3 Composition Ap i 3.1 关于 Composition Api 3.2 什么时候使用Composition Api 四,Composition Api 必备基础 4.2 ref 创建响应式变量 4.3 生命周期 4.4 watch 4.5 comp

  • Vue2项目升级到Vue3的详细教程

    目录 应不应该从 Vue 2 升级到 Vue 3 Vue 3 不兼容的那些写法 Vue 3 生态现状介绍 使用自动化升级工具进行 Vue 的升级 总结 应不应该从 Vue 2 升级到 Vue 3 应不应该升级?这个问题不能一概而论. 首先,如果你要开启一个新项目,那直接使用 Vue 3 是最佳选择.后面课程里,我也会带你使用 Vue 3 的新特性和新语法开发一个项目. 以前我独立使用 Vue 2 开发应用的时候,不管我怎么去组织代码,我总是无法避免在 data.template.methods

  • 基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.0保持一致. ◆ 快速引入 在main.js中全局引入v3p

  • 使用Vue3+ts 开发ProTable源码教程示例

    目录 前台实现 实现效果 技术栈 使用方法 ProTable 设计思路 编码风格 css 小知识 表格操作 小结 后期功能扩展 后台实现 数据库 mysql 新建项目 RESTful 风格的 URL 定义 Sequelize controller model router.js API 文档 Apifox ts用到的一些 前台实现 实现效果 技术栈 vue3 + typescript + element-plus 使用方法 <template> <el-tabs type="b

  • iOS 10即将来袭!升级你的iOS开发装备

    WWDC(苹果开发者大会)刚刚过去不久,iOS 10将不久来袭,是时候升级你的iOS开发装备了!小编整理了10款必备开发工具,让你的开发过程事半功倍. SourceTree SourceTree是一个免费的Mac软件,主要用于Git和Mercurial版本控制.它可以帮助你进行源代码控制计划,跟传统的复杂的命令行版本控制软件相比,SourceTree是一款独一无二的GUI工具.对于新手Git用户来说,SourceTree使用起来简单且高效,对于经验丰富的app开发人员来说,SourceTree有

  • vue项目中vue-i18n和element-ui国际化开发实现过程

    在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行.element-ui插件自身也提供了语言包.具体的配置和使用方法参考如下: 默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element

  • vue项目依赖升级报错处理方式

    目录 vue项目依赖升级报错处理 当启动vue项目安装依赖时报错 vue项目依赖升级报错处理 1.Vue Router 升级到3.5.1报错:Navigation cancelled from "/login" to "/" with a new navigation 原因:Vue Router内部报错没有进行catch处理导致的编程式导航跳转问题,往同一地址跳转时会报错,push和replace 都会导致这个情况的发生 import Vue from 'vue'

  • vue axios请求成功却进入catch的原因分析

    问题:axios返回200状态码(即请求成功)却走进了catch里面 原因: 1.当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常(注意:此时控制台并不会报错,因为错误被catch捕获了) 2.axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到.例如 form表单,点击按钮提交后,表单会刷新 补充知识:axios用catch的写法与不使用catch有什么区别? 官网上的写法: axios.post(url

  • vue router返回到指定的路由的场景分析

    项目场景: 项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) 问题描述: 提示:这里描述项目中遇到的问题: 如果我们不做控制的话,安卓按照浏览器返回机制,依次从D-C-B-A这样子,这样子会有一定的bug,测试那边也是说不过去啊,原本想利用beforeRouteLeave这个来操作进行更改跳转,发现还是有点问题最后还是用beforeRouteEnter来操作了,先放上两个的区别吧: 这里先介绍一下导航守卫 > beforeRouteEnter 离开路由之

随机推荐