注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法

一、安装jquery

npm install jquery --save

二、一般安装成功后在package.json文件内的dependencies项中会有"jquery": "^1.12.4",如果没有可以手动添加。需要注意的是,现在我们都是直接使用模板创建项目的,所以第一步是可以省略的(不要说我第二步才说第一步可以省略,这是你自己的问题,看任何东西都是先看了再去做的)。

三、打开.eslintrc.js 文件,找到env ,在里面 添加 jquery:true,默认应该是只有node:true,如果都没有,那就加上env呗

四、打开vue.config.js 文件,在文件的头部位置加上const webpack = require('webpack'),然后在module.exports中,添加

configureWebpack: {

plugins: [

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"windows.jQuery":"jquery"

})

]

}

这一步骤类似vue-cli2.0的配置方法

五、在main.js中添加“import $ from 'jquery”,到此步,jquery的配置就完成了

vue/cli 3 引入 使用jQuery的更多相关文章

  1. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

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

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

  3. 在vue项目中引入jquery

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

  4. vue cli 3 +jquery

    const webpack = require('webpack')module.exports = { // baseUrl type:{string} default:'/' // 将部署应用程序 ...

  5. vue -- 正确的引入jquery

    虽然vue中尽量不要使用jquery,但有时因为业务需求也不得不引入. 下载依赖 npm i jquery --save 全局配置的方法: 在webpack.base.conf.js里加入: var ...

  6. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  7. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  8. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  9. Vue CLI 3使用:浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

随机推荐

  1. for源码实现

    for源码实现 我们知道,java的while和for基本上是实现一样的功能,这样会不会有一点缺点,同时java的迭代器显得尤为的麻烦. python的for和while就不同了,在实现迭代的功能的情 ...

  2. Echarts自定义折线图例,增加选中功能

    用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...

  3. 【Flask系列】开发一个简单的Flask程序

    知识点 初始化:每一个flask程序都必须创建一个程序实例,遵循WSGI(Web Server Gateway interface)协议,把请求->flask Obj; 创建实例: app = ...

  4. 本地Docker Jenkins构建dotnet core web应用到Linux服务器 Docker上

    1.准备工作 环境 本地: Windows.Docker 代码仓库:Git 服务器:Linux.Docker 前提准备 创建个有dockerfile文件的dotnet core 3 web项目 新建一 ...

  5. Java基础IO类之字符串流(查字符串中的单词数量)与管道流

    一.字符串流 定义:字符串流(StringReader),以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通常一个字符串(XML.JSON), ...

  6. 这是一个测试 hello world

    第一次写博客,冒着生命危险尝试一下,发说说 搞了半天,发现原创文章在随笔发,我以为在文章目录发,白白在文章那里建了分类,太难了吧我

  7. 纯CSS背景噪声.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. YUM平台的搭建

    网络安全学习内容 三.挂载yum仓库 3.1连接映像文件 步骤如下: 1.右击映像文件,单击设置,选择CentOS映像文件 2.右击映像文件,单击连接 3.2挂载本地yum 打开终端,输入vim /e ...

  9. universal link使用

    iOS9之后,苹果推出了universal link方案,该方案较url scheme有明显的改善.url scheme很难做到唯一. 而 universal link却是你自己控制的. 1.有一个H ...

  10. ZOJ 2112 Dynamic Rankings(树状数组+主席树)

    The Company Dynamic Rankings has developed a new kind of computer that is no longer satisfied with t ...