详解如何在 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实现动态给table赋值的方法示例
Jul 04 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
中国第一家无线电行
2021/03/01 无线电
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
深入extjs与php参数交互的详解
2013/06/25 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Tensorflow 查看变量的值方法
2018/06/14 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
我的求职计划书
2014/01/10 职场文书
四下基层实施方案
2014/03/28 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
授权委托书
2015/01/28 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android