分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

在vue项目中正确的引入jquery

发布时间:2023-09-06 02:02责任编辑:沈小雨关键词:暂无标签

<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery

第一种方法

1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery

      打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。    

        dependencies:{

          "jquery":"^2.2.3"

       }

      然后在命令行中cnpm install install jquery --save-dev

      大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。

2:在build文件夹下的webpack.base.conf.js中加入一行代码

 var webpack=require("webpack")

3:在webpack.base.conf.js中module.exports的最后加入这行代码,

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

4:在main.js中引入,加入下面这行代码

      import $ from ‘jquery‘

5:最后一步,重新跑一边就好,cnpm run dev    

第二种方法(未验证 )

1.下载库:>npm install --save jquery

2.安装库:src/index.js:import $ from ‘jquery‘;

3.编译库:webpack src/index.js -o dist/bundle.js //编译 index.js文件并生成bundle.js 文件[code=javascript]

在vue项目中正确的引入jquery

原文地址:https://www.cnblogs.com/phoebeyue/p/9251429.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved