惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Proofpoint News Feed
T
The Blog of Author Tim Ferriss
aimingoo的专栏
aimingoo的专栏
M
MIT News - Artificial intelligence
N
Netflix TechBlog - Medium
Y
Y Combinator Blog
B
Blog RSS Feed
H
Help Net Security
Blog — PlanetScale
Blog — PlanetScale
Vercel News
Vercel News
Google DeepMind News
Google DeepMind News
Microsoft Security Blog
Microsoft Security Blog
G
Google Developers Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 司徒正美
L
LangChain Blog
IT之家
IT之家
F
Fortinet All Blogs
V
V2EX
C
Check Point Blog
The Cloudflare Blog
博客园_首页
阮一峰的网络日志
阮一峰的网络日志
A
About on SuperTechFans

博客园 - springsnow

npoi读取word 内容控件 Vue3中 watch、watchEffect 详解 toRefs学习 Vue3中如何响应式解构 props useTemplateRef使用 以后台方式启动RealVNC 在VS2022和VS2012共存的电脑上安装VS212扩展注意事项 VS中配置AnkhSVN源代码比较文件排列方式 使用VSCode撰写和发布博客园文章 DBever导入越南文Excel 复制对象中的一部分属性给另一个对象(对象部分属性解构到新对象) 使用metaWebBlog接口实现博客文章同步 .Net Core3.1上用EFCore的反向工程生成 水淼·文件批量处理器 如何高效的在博客园上编写MD格式的博客(插件pycnblog,推荐) 自动备份软件 —— Syncovery 7.98s Pro、Enterprise VMware 第三方百度网盘客户端 PanDownload、速盘、panlight 本地电脑视频播放器推荐PotPlayer、KMPlayer
如何使用 Vue SFC Playground
springsnow · 2024-09-29 · via 博客园 - springsnow

如何导入外部库

使用外部库

1727578871404

导入库:

1727578829390

Vue SFC Playground 有一个 import map 功能,在这个文件中可通过在线 cdn 的方式引入外部库,然后在组件中使用。

image.png

每个库对应的 cdn 文件,一般可以在 unpkg 这个网站上找到。
但是这个网站没有提供搜索库的功能,所以如果你不知道怎么去找到你需要的库的具体的路径,你可以有以下2个办法:

  1. 通过搜索殷勤搜索,关键字为:

unpkg packageName, 如搜索 lodash 相关库, 可输入:unpkg lodash, 然后点击相应结果进去可以看到文件列表,然后也可以切换版本。

image.png

image.png

  1. 利用 unpkg 预定的路由规则去找

其实,unpkg 虽然没提供很直观的操作页面,但找库的方法,在 unpkg 的首页是给出了的。
不过,都是英文的,一般的可能直接懒得看。

image.png

我们可以看到,在 https://unpkg.com/{packageName}/ 输入这个路径后,可以看到包的文件列表,然后我们就可以通过一个可视化的列表去找我们想要引入进去的文件了。一定注意,报名后面要跟一个 斜杠 "/".

如,你输入 https://unpkg.com/vue/ 点击回车,网站会直接重定向到这个目录:[UNPKG - vue](https://unpkg.com/browse/vue@3.3.6/)

也就是最新版本文件目录,然后也可以切换版本。