一、在 inde.html 中使用 `script` 标签来引入

1、直接引入，全局可用

ESLint 语法检测会报错：'$' is not define

// index.html<script src="./static/jquery.js"></script>

// vue文件export default {mounted () {/* eslint-disable */console.log($)}}

2、在 webpack 中配置一个 externals，使用import来引入使用

ESLint 语法检测不会报错

// index.html<script src="./static/jquery.js"></script>

// webpack配置文件externals: {'jquery': 'jQuery'
}

// vue文件import $ from 'jquery'export default {mounted () {console.log($)}}

二、在webpack中配置 alias来引入

1、使用 import 引入使用

ESLint 语法检测不会报错

// webpack 配置文件resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),'jquery': resolve('static/jquery.js')}
}

// vue文件import $ from 'jquery'export default {mounted () {console.log($)}}

2、不用import，但需在 webpack 配置 plugins

ESLint 语法检测会报错：'$' is not define

// webpack配置文件resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src'),'jquery': resolve('static/jquery.js')}
},plugins: [new webpack.ProvidePlugin({$: 'jquery'})
]

// vue文件export default {mounted () {/* eslint-disable*/console.log($)}}

三、解决ESLint报错

项目开启了 ESLint 语法检测的话，会报一个 error ：'$' is not defined。

1、在每一个使用 $ 的代码行上加 /* eslint-disable */ ，忽略该报错。

2、在根目录下的 .eslintrc.js 的rules{}中添加 'no-undef': 0 之后重启编辑器即可解决。

Vue 项目中引入本地第三方 JS 库相关推荐

VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
4.Vue项目中下载本地pd、word、excel文件
记录:Vue项目中下载本地pdf.word.excel文件今日的一个需求是下载导入模板文件,该模板文件不是接口请求获取,而是本地的文件该文章属转载:Vue下载本地pdf.word.excel文件 ...
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器 1.复制依赖文件 1.1 示例通过 webpack 插件自动复制依赖 1.1.1.编辑你的 webpack.config.js ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...

Vue 项目中引入本地第三方 JS 库

一、在 inde.html 中使用 `script` 标签来引入

1、直接引入，全局可用

2、在 webpack 中配置一个 externals，使用import来引入使用

二、在webpack中配置 alias来引入

1、使用 import 引入使用

2、不用import，但需在 webpack 配置 plugins

三、解决ESLint报错

Vue 项目中引入本地第三方 JS 库相关推荐

最新文章

热门文章

Vue 项目中引入本地第三方 JS 库

一、在 inde.html 中使用 script 标签来引入

1、直接引入，全局可用

2、在 webpack 中配置一个 externals，使用import来引入使用

二、在webpack中配置 alias来引入

1、使用 import 引入使用

2、不用import，但需在 webpack 配置 plugins

三、解决ESLint报错

Vue 项目中引入本地第三方 JS 库相关推荐

最新文章

热门文章

一、在 inde.html 中使用 `script` 标签来引入