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. docker占满linux磁盘根目录的解决办法

    一.磁盘根目录被占满 [test@localhost docker]$ df -lh Filesystem Size Used Avail Use% Mounted on /dev/mapper/ce ...

  2. Linux-task_struct和文件系统及管道的关系

    推荐:文件描述符和文件指针的关系 fs_struct 记录该进程所在文件系统等信息. files_struct 记录该进程当前打开的所有文件等信息,其中有一个元素为数组,数组索引是文件描述符,数组元素 ...

  3. 【Apache】Apache的安装和配置

    Apache是世界非常流行的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. Apache在Win7上的安装 下载apa ...

  4. LaTeX中的各种距离设置总结

    LaTeX中的各种距离设置总结   1. 页面设置 A4 会给你一个较小的页面,为了使用更多的控制,可用 geometry宏包  和  命令 \layout . 2. 改变长度 在latex里改变长度 ...

  5. tensorflow 笔记13:了解机器翻译,google NMT,Attention

    一.关于Attention,关于NMT 未完待续... 以google 的 nmt 代码引入 探讨下端到端: 项目地址:https://github.com/tensorflow/nmt 机器翻译算是 ...

  6. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  7. 【nodejs】exports 和 module.exports 的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码.但很多新手可能会迷惑于 exports 和 module.exports 的区别,为了更好的理解 e ...

  8. css3图片处理方式 object-fit

    .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { ...

  9. springboot-thymeleaf

    Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: Thymeleaf 在有网络和无网络 ...

  10. 用xstart远程连接linux图形用户界面

    转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...