玩转 Vue 3 全家桶
大圣
前百度前端架构师
38321 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 44 讲
玩转 Vue 3 全家桶
15
15
1.0x
00:00/00:00
登录|注册

17 | 实战痛点3:Vue 3中如何集成第三方框架

引入第三方库的注意事项
指令增强型组件的封装
封装可视化组件库的方式
封装第三方工具框架的方式
loading指令的注册和实现
实现图片懒加载的指令
注册全局自定义指令
封装可视化组件的方式
ECharts的使用方式
使用ECharts封装Vue组件
依赖其他类似库,如xlsx库、clipboard库
引入NProgress库的步骤
使用axios发送和获取网络接口数据
少用全局变量
按需使用第三方库
尽可能少用全局属性
考虑项目的长期可维护性
总结
指令的封装
组件的封装
独立的第三方库
引入第三方库的注意事项
实战痛点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。
npm install nprogress -D
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

Vue 3中集成第三方框架的实战经验 本文介绍了在Vue 3中集成第三方框架的实战经验。首先,详细介绍了如何引入独立的第三方库,以axios和NProgress为例,展示了安装和使用方法。其次,讨论了在Vue 3中封装可视化组件,以ECharts为例,展示了如何将其封装成Vue组件。最后,介绍了指令的封装,以图片懒加载和组件加载状态为例,展示了指令的注册和使用方法。通过实际代码示例和详细解释,帮助读者了解了在Vue 3中集成第三方框架的方法和注意事项,对于提高开发效率具有实际指导意义。文章还提到了引入第三方库的注意事项,包括长期可维护性、按需使用、全局属性的注意事项等。读者可以从中学习到如何组织代码、少用全局变量以及避免引入第三方库全部代码的技巧。整体而言,本文内容丰富,涵盖了在Vue 3中集成第三方框架的多个方面,对于开发人员具有实际指导意义。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《玩转 Vue 3 全家桶》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(15)

  • 最新
  • 精选
  • molingwen
    课程知识很精彩,就是语速太快了,完全跟不上节奏。适当有点停顿应该效果更好👌🏻

    作者回复: 收到,下次录音一定注意

    2021-11-24
    3
    3
  • Geek_908201
    这个 createComponent API 具体是怎么使用的啊?有相关的文档连接吗

    作者回复: createComponent其实是element3的工具函数,代码链接在这里, https://github.com/hug-sun/element3/blob/master/packages/element3/src/composables/component.js#L11 其实就是使用h包裹了一下组件

    2021-11-27
    1
  • 起風了
    大圣老师好,代码库可以更新一下吗,上一节课开始有些模糊了,这节课到了指令那里可能有些粗略,也有点不太清楚具体指令那个代码是写到哪个文件夹的哪个文件,怎么使用,效果怎么样

    作者回复: 这几天我把手写vue源码的稿子写完后会把实战篇的代码更新一版

    2021-12-16
    3
  • 南山
    1. print.js, 打印 2. pdfjs, 生成pdf 3. html2canvas, 生成海报
    2021-11-24
    2
    16
  • 柒月
    记个坑: // 通过ref获得DOM let chartRef = ref() // 这里的名称 必须与 ref='chartRef' 一致
    2021-11-24
    3
    13
  • 山雨
    老师的代码库的代码啥时候同步课程更新啊
    2021-11-25
    3
    8
  • ll
    很棒,点赞,看完以后说点感受: 1. 关于"一股脑的引入第三方库..."这段描述,一看就是有故事的人,哈哈,人间真实。 2. mixin,extends 机制这个点,可以结合《14 Typescript...》的思考题。这个机制是 js 作为动态语言 的优点,但当项目规模复杂后,就成了缺点。 mixin 的实现的原理就是将传入 mixin 和 vue 实例的 options 合并,然后返回 vue 实例。 3. 回头看看标题,这几节课确实戳到”痛点“很精彩。
    2021-11-24
    7
    4
  • 海阔天空
    引入使用第三方库的原则应该是按需引用,按照项目业务需求合理封装。不要为了图省事,引入很多在项目中没有用的库。
    2021-11-24
    4
  • 费城的二鹏
    看完这节课领悟到一个思路,向项目中添加代码与引入一定要克制,尽可能少的添加,避免项目膨胀,这样能提升可维护行。
    2021-11-24
    4
  • 陈豆
    lodash.js,day.js
    2021-12-15
    3
收起评论
显示
设置
留言
15
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部