Vue-cli(Vue脚手架)中引入jQuery

需求:在Vue项目中使用JQuery

安装成功后 jQuery(两种方法)

  1. 下载npm包

    npm install jquery –save
     
  2. 在vue ui的可视化页面中下载 jquery

    image-20210324234301579

  3. 安装成功后 package.json显示:

image-20210324234607652

创建 vue.config.js文件

在根目录下创建vue.config.js文件 并配置

  1. 在最上面定义 var webpack = require(‘webpack’)

image-20210324235334785

const webpack = require('webpack')
 
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            })
        ]
    }
}
 

2.其他配置 (框内新增是支持JQuery的配置)

untitled

在main.js(入口文件) 引入

  • 框出来的都是新增的
import $ from 'jquery'  //导入jquery
Vue.prototype.$ = $   //将$(jquery)挂在到vue.prototype身上,让所有的Vue共享这个方法
 

image-20210325000216324

测试

在 $ ( funtion() {

​ 在这里写 jquery 代码

} )

image-20210325000824882

<script>
export default {}

$(function () { //这里面写jQuery代码
  console.log('引入成功')
})
</script>
 

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️,鼓励笔者创作更好的文章,谢谢🙏大家。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/12577.html

发表评论

登录后才能评论