1.NPM 安装 jQuery,项目根目录下运行以下代码

npm install jquery --save

2.webpack配置
在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,

var webpack = require('webpack')

然后在module.exports中添加一段代码,

// 原有代码 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, // 添加代码 plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery" }) ], // 原有代码 module: { rules: [ // ...... ] }

main.js里导入jQuery

import 'jquery'

最后启动项目 npm run dev即可

在vue项目里使用jquery的更多相关文章

  1. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

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

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  3. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

  4. 项目里的jquery.min.js错误

    项目里的jquery.min.js报一系列 - Missing semicolon - Missing semicolon - Missing semicolon - Missing semicolo ...

  5. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  6. vue 项目里正确地引用 jquery

    一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const ...

  7. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  8. Vue项目中使用jquery插件

    1.引入jquery,并且在vue.config.js里配置 config.plugin('provide') .use(webpack.ProvidePlugin, [{ $: 'jquery', ...

  9. vue项目如何引用jquery

    虽然vue不推荐直接操作DOM,而且也提供了操作DOM的方式.但是在某些时候还是要用到jquery,那么如何引入jquery呢? 费了半天劲,记录一下: 一 : 安装jquery npm instal ...

随机推荐

  1. HDU 1022.Train Problem I【栈的应用】【8月19】

    Train Problem I Problem Description As the new term comes, the Ignatius Train Station is very busy n ...

  2. 关于CALayer导致的crash问题

    push到一个页面进行绘图时,设置如下: CALayer * layer = [CALayer layer]; layer.frame = CGRectMake(, , , ); layer.dele ...

  3. MySQL 8 中新的复制功能

    MySQL 8 中新的复制功能使得操作更加方便,并帮助用户更好地观察复制过程中内部发生的情况. 使用 MySQL 5.7.17 获取 MySQL 组复制插件是一项巨大的工作.组复制是一个新的插件,通过 ...

  4. SNF软件开发机器人-子系统-导出-导入功能-多人合作时这个功能经常用到

    导出 导出可以将资源表和子系统导出并形成一个json文件. 1.效果展示: 2.使用说明: 点击导出按钮后会弹出一个导出页面.页面的左侧可以选择功能,右侧可以选择资源表,选择功能的同时右侧中功能所需的 ...

  5. js 的学习

    day41 学习链接:https://www.cnblogs.com/yuanchenqi/articles/5980312.html 知识结构: BOM对象 DOM对象(DHTML) 一个完整的Ja ...

  6. MySQL利用mysqldump在线修复或新增从库

    如果数据库的数据量不是很大,可以利用mysqldump导出备份修复从库故障或新增从库实例 主库IP:192.168.1.1从库IP:192.168.1.2 1.主库服务器导出备份:db_name=`m ...

  7. 减少网站跳转时间,增强网站数据安全——HSTS 详解

    近年来随着 Google.Apple.百度等公司不断推动 HTTPS 普及,全网 HTTPS 已是大势所趋.目前多数网站都已经支持 HTTPS 访问,但是在由 HTTP 转向 HTTPS 路程中,不少 ...

  8. .NET Core +NuGet 创建打包发布自己的类库包

    1. 创建类库项目 你可以使用现有的 .NET 类库项目用于要打包的代码,或者创建一个简单的项目,.NET CORE 2.1 项目的 类库如下所示: NugetDemo.class using Sys ...

  9. HTML5+CSS3 效果网站集合

    1.jquery插件库 HTML5制作3D樱花漫天飞舞  http://www.jq22.com/jquery-info3547 2.17素材网   http://www.17sucai.com/pi ...

  10. 关于FastJSON

    https://github.com/alibaba/fastjson/wiki/Quick-Start-CN FastJSON常见问题 FastJson和get方法的问题 使用SimplePrope ...