注意这里配置的是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. Docker 遇到的一些错误

    1.version Base not defined in file libdevmapper.so.1.02 在 Centos 6.5 上安装docker-io之后,使用/etc/init.d/do ...

  2. 如何提高 PHP 代码的质量?第二部分 单元测试

    在“如何提高 PHP 代码的质量?”的前一部分中:我们设置了一些自动化工具来自动检查我们的代码.这很有帮助,但关于我们的代码如何满足业务需求并没有给我们留下任何印象.我们现在需要创建特定代码域的测试. ...

  3. desc和show

    desc只能查看表结构 查看zx1表结构 desc zx1; mysql> desc zx1 -> ; +---------+---------+------+-----+-------- ...

  4. Mac配置Gradle环境

    下载Gradle 下载地址:https://gradle.org/install 下载最新版本:gradle-3.3 (当前最新版2017年2月8日) 配置Gradle环境 我的本机Gradle存放路 ...

  5. Python正则表达式,看完这篇文章就够了...#华为云·寻找黑马程序员#【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  6. SpringBoot使用注解(@value)读取properties(yml)文件中 配置信息

    为了简化读取properties文件中的配置值,spring支持@value注解的方式来获取,这种方式大大简化了项目配置,提高业务中的灵活性. 1. 两种使用方法1)@Value("#{co ...

  7. 淘宝适配 flexible.js

    1.引入 阿里cdm文件,也可以自己下载下来引用,不需要在添加<meta name="viewport"">标签了 <script src=" ...

  8. 获取iOS设备的型号

    获取iOS设备的型号 需要#import "sys/utsname.h"     structutsname systemInfo;     uname(&systemIn ...

  9. 商品分页查询 ego-prc 实现-easyui

    使用 easyui 的 DataGrid 控件实现商品的分页查询,DataGrid 控件提交分页所需要的 page 和rows 参数,后台响应包含总记录数 total 和需要显示的商品对象的集合 ro ...

  10. python光标图片获取

    # -*- coding:utf-8 -*- import win32api import win32gui,win32ui import time while True : time.sleep(1 ...