Vue CLI、uniapp项目外部js库的导入方式

前端项目有时候需要使用像jquery、corejs等开源库。本文将介绍普通的cli项目和uniapp项目如何导入这些库,以及如何使用。以jquery为例。

一、VueCLI项目

将jquery库放到public文件夹下,在index.html文件里面使用<script>引入

1.导入


2.使用演示
在helloWorld.vue里面打印出window对象以及通过jquery获取DOM


从上图日志可以看到,jquery以及被挂载到window上,可以在项目中直接使用 $


二、uniapp项目

uniapp官方文档上面有介绍如何导入第三方js,只是具体步骤不够明确。
官方介绍
下面我将详细介绍一下具体的操作步骤:
1.在根目录下新建index.html文件,将官网里面的index.html代码拷到文件里。

2.manifest.json的h5配置里,index.html模板路径设置为 index.html,这一步很关键


3.将jquery文件放置到static文件夹下,不能放到其他地方。
官方对static文件夹的解释是:编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。跟Vue CLI项目的public目录差不多。
放置完后index.html里面使用<script>引入,这一步跟Vue CLI项目一样。


4.使用演示



如上图所示,window已经将jquery挂载上去了


通过$ 获取DOM也成功了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容