Vue引入第三方js库

情况一：无法通过npm install安装包引入

方法一：在index.html中引用script

直接在index.html中引用script，任何时候皆可用！！
注意：第三方js必须放在static目录下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-test</title>//新增，直接script标签引入，全局皆可用<script type="text/javascript" src="./static/js/qrcode.js"></script></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

方法二：若第三方中的对象或者方法，已经暴露出来（即，已经通过export，export default导出）,则可以直接通过import引入即可使用。eg: jquery-1.11.3.min.js

此种方法，所引用的第三方插件本身必须已经通过export，export default导出方有效

2.1，将jquery-1.11.3.min.js放入static/js目录下（可局部引入2.2，或全局引入2.3）
2.2，局部引入方法如下

<script>//引入一个有export输出的文件import  $  from '../../static/js/jquery-1.11.3.min 'export default {mounted(){this.$nextTick(function () {console.log($)})}}
</script>

或者，你也可以将jquery的路径放入webpack.base.conf.js中进行配置,这就是网上最常见的 “webpack.base.conf.js中配置 alias，import 引入后再使用”的方法。

//webpack.base.conf.js
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'jquery':resolve('static/js/jquery-1.11.3.min')     }},//组件中引入
<script>//引入一个有export输出的文件import  $  from 'jquery 'export default {mounted(){this.$nextTick(function () {console.log($)})}}
</script>

2.3，全局引入方法，webpack.base.conf.js引入webpack,再配置 plugins

const webpack = require('webpack');        //先行引入webpack//webpack.base.conf.js
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'jquery':resolve('static/js/jquery-1.11.3.min')     }},//插件
plugins:[       //这样的话，全局皆可引用,注意，开头必须引入webpack,即const webpack = require('webpack')new webpack.ProvidePlugin({$:'jquery'})
],//组件中无需引入，直接即可使用
<script>export default {mounted(){this.$nextTick(function () {console.log($)})}}
</script>

情况二：通过npm install安装包引入

方法一，修改webpack配制，进而引入

第一步，安装插件，npm install xxx --save.
第二步，webpack.base.conf.js配制如下( 配制和2.3 一样)

const webpack = require('webpack');        //先行引入webpack//webpack.base.conf.js
resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),‘xxx’:'sss'         //sss为安装的包名 ,xxx为包路径的简写}},//插件
plugins:[       //这样的话，全局皆可引用,注意，开头必须引入webpack,即const webpack = require('webpack')new webpack.ProvidePlugin({ttt:‘xxx’      //ttt为插件对象})
],//组件中无需引入，直接即可使用
<script>export default {mounted(){this.$nextTick(function () {console.log(ttt)})}}
</script>

方法二，直接挂载到Vue实例上

// main.js中写入
import   xxx    from   '安装的插件'
Vue.prototype.xxx = xxx;

参考链接：https://www.cnblogs.com/queende7/p/8668691.html
参考链接：https://blog.csdn.net/csdn_yudong/article/details/78795743

Vue引入第三方js库相关推荐

php引入外部js,vue.js怎么引入外部js,vue引入第三方js库
vue.js怎么引入外部js·怎么介绍外部js,在vue.js中引入外部js的方法如下:1.使用外部文件[config.js],代码为[函数格式XML(text){ return text }]:2. ...
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...
vue引入第三方js的方案报错
vue引入第三方js的方案报错< 问题描述 vue项目中引用一个外部js包 npm中没有响应的js下载所以只能通过外部引用使用方法如下: 1.首先是第三方js包存放的位置一定要放在 st ...
Vue引入第三方JavaScript库和如何创建自己的Vue插件
一第三方JavaScript库前言 .vue文件中不解析 script标签引入js文件,只能用 import 引入有两种用法: 1.import a from '-/a' 2.import ' ...
VUE 引入第三方js包及调用
1.首先是第三方js包存放的位置一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js ...
Vue 引入第三方图标库
我的项目是Vue+element,由于这个element中的图标比较少,所以咋们引入阿里云的图标阿里云图标库地址:https://www.iconfont.cn/home/index 首先你要有个阿 ...
vue引入第三方js文件
1.把js文件放入静态文件文件夹(static)下: 2.修改build>webpack.base.conf.js文件在resolve.alias添加需要的js文件 3.在需要的页面引入
vue 引入第三方js报错undefined
今天在项目中使用到高德地图,在本地npm run dev运行起来没有问题,可是在打包发布到测试环境后,使用高德地图的界面就会报Amap undefined,按照自己原先的教程(vue2(webpack ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...

Vue引入第三方js库

情况一：无法通过npm install安装包引入

情况二：通过npm install安装包引入

Vue引入第三方js库相关推荐

最新文章

热门文章