详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件


Posted in jQuery onJune 01, 2017

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码

// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
 // 其他代码...
 resolve: {
  extensions: ['', '.js', '.vue'],
  fallback: [path.join(__dirname, '../node_modules')],
  alias: {
   'src': path.resolve(__dirname, '../src'),
   'assets': path.resolve(__dirname, '../src/assets'),
   'components': path.resolve(__dirname, '../src/components'),

   // webpack 使用 jQuery,如果是自行下载的
   // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
   // 如果使用NPM安装的jQuery
   'jquery': 'jquery' 
  }
 },

 // 增加一个plugins
 plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery"
  })
 ],

 // 其他代码...
}

这样就可以正确的使用jQuery了,比如我要引入Bootstrap,我们在vue的入口js文件src/main.js开头加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

这样Bootstrap就正确的被引用并构建。

在比如使用toastr组件,只需要在需要的地方import进来,或者全局引入css在需要的地方引用js,然后直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

vue-cli webpack全局引入jquery

1、首先在package.json里加入,

dependencies:{
 "jquery" : "^2.2.3"
}

然后 nmp install

2、在webpack.base.conf.js里加入

var webpack = require("webpack")

3、在module.exports的最后加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  jQuery: "jquery",
  $: "jquery"
 })
]

4、然后一定要重新 run dev

5、在main.js 引入就ok了

import $ from 'jquery'

在.vue文件中引入第三方非NPM模块

var Showbo = require("exports?Showbo!./path/to/showbo.js");

vue-cli引入外部文件

webpack.base.conf.js 中添加externals

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量 Swiper :

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

之后再在根目录下的index.html文件里引入文件: <script src="static/lib/swiper.js"></script>

这样子就可以在需要用到swiper.js的文件里加入这行代码:import Swiper from 'swiper',这样就能正常使用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 #jQuery
jQuery实现动态删除LI的方法
May 30 #jQuery
jQuery异步提交表单实例
May 30 #jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Python 正则表达式的高级用法
2016/12/04 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
教师研修随笔感言
2014/01/23 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
社区服务活动总结
2014/05/07 职场文书
初中成绩单评语
2014/12/29 职场文书
党员自我评价2015
2015/03/03 职场文书
2019广播稿怎么写
2019/04/17 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Python 文字识别
2022/05/11 Python