js实例教程-在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?

发布时间:2018-11-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

使用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')

参考:

Managing Jquery plugin dePEndency in webpack

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

vue-cli webpack全局引入jquery

首先在Package.json里加入,

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

然后 nmp install

在webpack.base.conf.js里加入

 varwebpack =require("webpack")

在module.exports的最后加入

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

然后一定要重新run dev

在main.js 引入就ok了

 import$from'jquery'

参考:vue-cli怎么引入jquery

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

 varShowbo =require("exportsShowbo!./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',这样就能正常使用了。

使用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')

参考:

Managing Jquery plugin dependency in webpack

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

vue-cli webpack全局引入jquery

首先在package.json里加入,

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

然后 nmp install

在webpack.base.conf.js里加入

 varwebpack =require("webpack")

在module.exports的最后加入

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

然后一定要重新run dev

在main.js 引入就ok了

 import$from'jquery'

参考:vue-cli怎么引入jquery

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

 varShowbo =require("exportsShowbo!./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',这样就能正常使用了。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦!&nbsp;js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?全部内容,希望文章能够帮你解决js实例教程-在vue项目里怎么正确地引用 jquery 和 jquery-ui的插件?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。