如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件 - Xuebin. Leo - SegmentFault 思否

  1. 专栏
  2. Xuebin. Leo
  3. 文章详情

    xuebin_leo

xuebin_leo 597 发布于 Xuebin. Leo 关注专栏

2016-09-27 发布

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

[](https://segmentfault.com/a/1190000007020623)

93.4k 次阅读  ·  读完需要 11 分钟

46

使用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-cli怎么引入jquery

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

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

参考: exports-loader

vue-cli引入外部文件

在 webpack.base.conf.js 中添加externals

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


之后再在根目录下的index.html文件里引入文件：<script src="static/lib/swiper.js"></script>
这样子就可以在需要用到swiper.js的文件里加入这行代码：import Swiper from 'swiper'，这样就能正常使用了。
参考: https://segmentfault.com/q/1010000005169531?_ea=806312

•••

赞  |   46 收藏  |  174

你可能感兴趣的

22 条评论

默认排序 时间排序

Juven · 2016年12月19日

在设置了provideplugin配置之后，貌似不用import引入jquery也可以使用$或者jquery的了。

在设置了provideplugin配置之后，貌似不用import引入jquery也可以使用$或者jquery的了。

赞 +2 回复 取消 保存

2

不需要import引入jquery，jquery是全局的了

不需要import引入jquery，jquery是全局的了

— 淡然_57 · 2017年04月01日

0

是的 已经是全局的了 vue已经帮助配置好了 如果是单纯的webpack确实得手动import

是的 已经是全局的了 vue已经帮助配置好了 如果是单纯的webpack确实得手动import

— 灰了个灰 · 1月17日

添加回复

uuueeu · 2017年08月16日

牛B，解决了第三方插件的问题了。cropper我用的是第三方的非NPM的。能用了。

牛B，解决了第三方插件的问题了。cropper我用的是第三方的非NPM的。能用了。

赞 +1 回复 取消 保存

添加回复

无尽的故事 · 2016年11月13日

请问一下import toastr from 'assets/libs/toastr/toastr.min'，而vue-cli又有eslint检查，这样不是会出错不通过吗？

请问一下import toastr from 'assets/libs/toastr/toastr.min'，而vue-cli又有eslint检查，这样不是会出错不通过吗？

赞 回复 取消 保存

添加回复

淡然_57 · 2017年04月01日

漂亮，谢谢

漂亮，谢谢

赞 回复 取消 保存

添加回复

HongHaiyang · 2017年04月06日

为什么我这样还是不行啊，提示我需要jquery。。。网上所有方法我都试了个遍。。。

为什么我这样还是不行啊，提示我需要jquery。。。网上所有方法我都试了个遍。。。

赞 回复 取消 保存

0

试试在index.html里加入jquery

试试在index.html里加入jquery

— 小王子 · 6月28日

添加回复

cuijinxin · 2017年06月26日

build/webpack.base.conf.js 工程目录下找不到这个文件怎么办

build/webpack.base.conf.js 工程目录下找不到这个文件怎么办

赞 回复 取消 保存

添加回复

傲娇小公举 · 2017年07月04日

为什么我设置了provideplugin配置之后调用外部的js方法的时候还是提示我我没定义

为什么我设置了provideplugin配置之后调用外部的js方法的时候还是提示我我没定义

赞 回复 取消 保存

添加回复

傻子和白痴的心 · 2017年07月17日

你好

你好

赞 回复 取消 保存

添加回复

傻子和白痴的心 · 2017年07月17日

为什么我引用了jquery没法使用吧，我在组件中可以console出来，但是绑定时间就没有效果

为什么我引用了jquery没法使用吧，我在组件中可以console出来，但是绑定时间就没有效果

赞 回复 取消 保存

添加回复

JohnNiang · 2017年08月03日

重启解决一切

重启解决一切

赞 回复 取消 保存

添加回复

我是一只茶叶蛋 · 2017年08月21日

引入jquery 根本解决不了 http://blog.csdn.net/yiifaa/a... 这个才可以

引入jquery 根本解决不了 http://blog.csdn.net/yiifaa/article/details/51916560 这个才可以

赞 回复 取消 保存

添加回复

南极快没有冰山 · 2017年10月23日

哈哈 很强 谢谢分享

哈哈 很强 谢谢分享

赞 回复 取消 保存

添加回复

Shine · 2017年10月26日

我的报错，帮忙看看什么问题
42 verbose cwd D:VUEmy-norm
43 error Windows_NT 6.1.7601
44 error argv "D:\ANZHUANG\node\node.exe" "D:\ANZHUANG\node\node_modules\npm\bin\npm-cli.js" "install"
45 error node v6.11.2
46 error npm v3.10.10
47 error code ETIMEDOUT
48 error errno ETIMEDOUT
49 error syscall connect
50 error network connect ETIMEDOUT 151.101.72.162:443
51 error network This is most likely not a problem with npm itself
51 error network and is related to network connectivity.
51 error network In most cases you are behind a proxy or have bad network settings.
51 error network
51 error network If you are behind a proxy, please make sure that the
51 error network 'proxy' config is set properly. See: 'npm help config'
52 verbose exit [ 1, true ]

我的报错，帮忙看看什么问题 42 verbose cwd D:\VUE\my-norm 43 error Windows_NT 6.1.7601 44 error argv "D:\ANZHUANG\node\node.exe" "D:\ANZHUANG\node\node_modules\npm\bin\npm-cli.js" "install" 45 error node v6.11.2 46 error npm v3.10.10 47 error code ETIMEDOUT 48 error errno ETIMEDOUT 49 error syscall connect 50 error network connect ETIMEDOUT 151.101.72.162:443 51 error network This is most likely not a problem with npm itself 51 error network and is related to network connectivity. 51 error network In most cases you are behind a proxy or have bad network settings. 51 error network 51 error network If you are behind a proxy, please make sure that the 51 error network 'proxy' config is set properly. See: 'npm help config' 52 verbose exit [ 1, true ]

赞 回复 取消 保存

0

npm的配置有问题

npm的配置有问题

— kemplaw · 2017年11月21日

添加回复

kemplaw · 2017年11月21日

这个很强了 感谢楼主的知识分享

这个很强了 感谢楼主的知识分享

赞 回复 取消 保存

添加回复

皓月之心 · 2017年12月06日

我发现不用在webpack.base.conf.js中配置，在要用的地方直接import $ from 'jquery'也可以，请问楼主有什么区别吗？

我发现不用在webpack.base.conf.js中配置，在要用的地方直接import $ from 'jquery'也可以，请问楼主有什么区别吗？

赞 回复 取消 保存

0

在webpack.base.conf.js中配置只是为了可以全局使用，就不用import了，在哪个文件中都可以使用；如果不在配置文件中设置，那么就需要在用到的地方import或require了。

在webpack.base.conf.js中配置只是为了可以全局使用，就不用import了，在哪个文件中都可以使用；如果不在配置文件中设置，那么就需要在用到的地方import或require了。

— _ing · 1月26日

添加回复

一杯凉白开 · 2月26日

楼主你好，

✘ http://eslint.org/docs/rules/... '$' is defined but never used
srcmain.js:6:8
import $ from 'jquery'

      ^

✘ 1 problem (1 error, 0 warnings)

Errors:
1 http://eslint.org/docs/rules/...

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use / eslint-disable / to ignore all warnings in a file.

不知道是什么问题

楼主你好， ✘ http://eslint.org/docs/rules/no-unused-vars '$' is defined but never used src\\main.js:6:8 import $ from 'jquery' ^ ✘ 1 problem (1 error, 0 warnings) Errors: 1 http://eslint.org/docs/rules/no-unused-vars You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ignore all warnings in a file. 不知道是什么问题

赞 回复 取消 保存

添加回复

7nz · 7月22日

按照此方法，直接引入的jq文件，之后在main.js里面 引入 import {$} from 'jquery'
就会报错"export '$' was not found in 'jquery'

按照此方法，直接引入的jq文件，之后在main.js里面 引入 import {$} from 'jquery' 就会报错"export '$' was not found in 'jquery'

赞 回复 取消 保存

添加回复

载入中...

显示更多评论

发布评论

Original url: Access
Created at: 2018-10-16 13:14:51
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论