17 | 实战痛点3:Vue 3中如何集成第三方框架
大圣
该思维导图由 AI 生成,仅供参考
你好,我是大圣。
在上一讲中,我给你介绍了如何在 Vue 3 中实现页面和接口的权限管理。我们把 vue-router 的动态路由、导航守卫、axios 的接口拦截等功能配合到一起使用,实现了页面的权限控制,这也算是 Vue 中进阶使用 vue-router 和 axios 的一个方式。
今天,我们再来学习另一个进阶玩法,聊一下如何在 Vue 3 中使用和引入更多的框架。可别小看这里的门道,有的第三方工具框架跟 Vue 耦合性不高,而有的需要做适配,这一讲我就详细给你说说实操中的注意事项,帮助你在提高开发效率的同时少走弯路。
独立的第三方库
首先我们要介绍的第三方框架是 axios,这是一个完全独立于 Vue 的框架,我们可以使用 axios 发送和获取网络接口数据。在 Vue、React 框架下,axios 可以用来获取后端数据。甚至在 Node.js 环境下,也可以用 axios 去作为网络接口工具去实现爬虫。
axios 这种相对独立的工具对于我们项目来说,引入的难度非常低。通常来说,使用这种独立的框架需要以下两步。
以页面进度条工具 NProgress 为例,第一步是,我们先进入到项目根目录下,使用下面的命令去安装 NProgress。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue 3中集成第三方框架的实战经验 本文介绍了在Vue 3中集成第三方框架的实战经验。首先,详细介绍了如何引入独立的第三方库,以axios和NProgress为例,展示了安装和使用方法。其次,讨论了在Vue 3中封装可视化组件,以ECharts为例,展示了如何将其封装成Vue组件。最后,介绍了指令的封装,以图片懒加载和组件加载状态为例,展示了指令的注册和使用方法。通过实际代码示例和详细解释,帮助读者了解了在Vue 3中集成第三方框架的方法和注意事项,对于提高开发效率具有实际指导意义。文章还提到了引入第三方库的注意事项,包括长期可维护性、按需使用、全局属性的注意事项等。读者可以从中学习到如何组织代码、少用全局变量以及避免引入第三方库全部代码的技巧。整体而言,本文内容丰富,涵盖了在Vue 3中集成第三方框架的多个方面,对于开发人员具有实际指导意义。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《玩转 Vue 3 全家桶》,新⼈⾸单¥68
《玩转 Vue 3 全家桶》,新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(15)
- 最新
- 精选
- molingwen课程知识很精彩,就是语速太快了,完全跟不上节奏。适当有点停顿应该效果更好👌🏻
作者回复: 收到,下次录音一定注意
2021-11-2433 - Geek_908201这个 createComponent API 具体是怎么使用的啊?有相关的文档连接吗
作者回复: createComponent其实是element3的工具函数,代码链接在这里, https://github.com/hug-sun/element3/blob/master/packages/element3/src/composables/component.js#L11 其实就是使用h包裹了一下组件
2021-11-271 - 起風了大圣老师好,代码库可以更新一下吗,上一节课开始有些模糊了,这节课到了指令那里可能有些粗略,也有点不太清楚具体指令那个代码是写到哪个文件夹的哪个文件,怎么使用,效果怎么样
作者回复: 这几天我把手写vue源码的稿子写完后会把实战篇的代码更新一版
2021-12-163 - 南山1. print.js, 打印 2. pdfjs, 生成pdf 3. html2canvas, 生成海报2021-11-24216
- 柒月记个坑: // 通过ref获得DOM let chartRef = ref() // 这里的名称 必须与 ref='chartRef' 一致2021-11-24313
- 山雨老师的代码库的代码啥时候同步课程更新啊2021-11-2538
- ll很棒,点赞,看完以后说点感受: 1. 关于"一股脑的引入第三方库..."这段描述,一看就是有故事的人,哈哈,人间真实。 2. mixin,extends 机制这个点,可以结合《14 Typescript...》的思考题。这个机制是 js 作为动态语言 的优点,但当项目规模复杂后,就成了缺点。 mixin 的实现的原理就是将传入 mixin 和 vue 实例的 options 合并,然后返回 vue 实例。 3. 回头看看标题,这几节课确实戳到”痛点“很精彩。2021-11-2474
- 海阔天空引入使用第三方库的原则应该是按需引用,按照项目业务需求合理封装。不要为了图省事,引入很多在项目中没有用的库。2021-11-244
- 费城的二鹏看完这节课领悟到一个思路,向项目中添加代码与引入一定要克制,尽可能少的添加,避免项目膨胀,这样能提升可维护行。2021-11-244
- 陈豆lodash.js,day.js2021-12-153
收起评论