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. 高仿MT4行情终端(K线图+操控+简单架构)

    技术:VS2015 Update3 + QT 5.11.2 + BOOST 1.68 + QT VS Tools + C++11   概述 模仿外汇MT4的界面 详细 代码下载:http://www. ...

  2. Laravel: 基础篇

    一.安装 1)采用一键安装包 http://laravelacademy.org/resources-download 2)Mac 上安装 ----------在Mac上安装composer----- ...

  3. iOS12

    ios 12 中的新特性. 已经有很多文章写得很好,这里不再赘述,直接给大家几个传送门: https://sspai.com/post/47168 https://post.smzdm.com/p/7 ...

  4. zsh+on-my-zsh配置教程指南(程序员必备)

    本文以CentOS 7/Mac 为例,介绍zsh的配置使用教程. 准备 查看当前环境shell echo $SHELL <!-- more --> 查看系统自带哪些shell cat /e ...

  5. PHP为JSON数据的API返回空数组或者空对象

    在使用 JSON 作为 API 数据 Content-Type 的时候,会有这样一个问题: 如何返回一个空对象和一个空数组? 使用:json_encode(array())   得到JSON结果:[] ...

  6. ComputeShader中Consume与AppendStructuredBuffer的使用

    上个月写了一篇使用像素shader返回累加信息的Trick:https://www.cnblogs.com/hont/p/9977401.html 后来无意中发现DX11/Compute shader ...

  7. NO.2 安装配置

    检测当前系统下的jdk安装情况: [root@Centos 桌面]# rpm -qa | grep java tzdata-java-2012j-1.el6.noarch java-1.7.0-ope ...

  8. 理解、学习与使用 JAVA 中的 OPTIONAL<转>

    从 Java 8 引入的一个很有趣的特性是 Optional  类.Optional 类主要解决的问题是臭名昭著的空指针异常(NullPointerException) —— 每个 Java 程序员都 ...

  9. Android中的AlarmManager的使用

    AlarmManager是Android中的一种系统级别的提醒服务,它会为我们在特定的时刻广播一个指定的Intent.而使用Intent的时候,我们还需要它执行一个动作,如startActivity, ...

  10. 使用.gitignore删除Github上的.idea文件

    环境:windows + git bash. 一.问题来源 由于之前用Goland建立Golang工程时,生成了.idea文件,不小心上传至Github: 所以尝试用.gitignore进行忽略不上传 ...