H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue-cli中如何引入基于jQuery的插件

在vue-cli的项目中要引入基于jQuery的插件,那么首先要引入jQuery,因此引发两个问题:

  1. 首先,怎么引入jQuery?
    查了一些资料,步骤是这样的:
    (1)首先在package.json中加入jQuery依赖,然后npm install jQuery –save安装依赖;
    (2)在build文件夹下找到webpack.base.conf.js文件,添加var webpack=require(‘webpack’),然后在module.exports里输入:

      plugins: [ 
             new webpack.ProvidePlugin({ 
                   $:"jquery", 
                   jQuery:"jquery", 
                  "windows.jQuery":"jquery"
          }) 
        ],           

    (3)在入口文件main.js中输入:import $ from ‘jquery’引入jQuery就可以全局使用了;

    这里引发的一个问题是现在webpack vue-cli生成的项目中,build里面的webpack配置分成了
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.prod.conf.js
    三个文件,看到插件plugins的引入是梵高了dev和prod中了,所以现在要再使用jQuery的话,(2)中的代码是要放到哪个conf.js文件中呢?

  2. 第二个问题,引入jQuery后,基于jQuery的插件应该怎么在项目中引用呢(这里用到的jQuery插件又分为可以通过npm安装和不能通过npm安装两种情况)?

求大神解答一下,万分感谢~

回答:

引入jQuery:
现在通过webpack vue-cli生成的vue项目中,build下面会生成三个conf文件:
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js
项目中要引入的插件写在dev.conf.js中,prod.conf.js应该是生产环境的,如果上线后还要用的话应该也要写,在两个文件中的plugins数组中写入:
new webpack.ProvidePlugin({
jQuery: “jquery”,
$: “jquery”
}),
然后再main.js中引入jquery:
import $ from ‘jquery’
到这里引入jquery就成功了,就可以全局使用了。

回答:

1.放在webpack.base.conf.js中,这个是基础配置文件

2.js文件的引用可以在index.html的头部使用script标签引入…

回答:

  1. 一样的,在webpack.base.conf.js 中的module.exports
plugins:[
        ///引入第三方js库
        new webpack.ProvidePlugin({
                jQuery: "jquery",
                $: "jquery"
        })
  ],
  1. 完成了上面的操作之后,要在组件中使用第三方js插件,只需要在组件中import 就可以了

本文地址:H5W3 » vue-cli中如何引入基于jQuery的插件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址