注:vue-cli3.0 没有了 webpack.config.js 配置文件,取而代之的是集合在 vue.config.js文件 内进行配置

默认已经安装好vue-cli3.0项目

step1:命令行工具,进入项目文件夹,执行: npm install jquery --save

step2:提示安装成功后,在package.json 文件内的 "dependencies"中检查是否有 "jquery": "^3.3.1", (如没有 则需手动添加):

step3:.eslintrc.js 文件中,env 中 添加 jquery:true

step4:【关键步骤】

vue.config.js 文件中:最头部添加 “const webpack = require('webpack')”;module.exports中,添加:

configureWebpack: {

    plugins: [

    new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"windows.jQuery":"jquery"

})

    ]

  }

step5:main.js中 引入 “import $ from 'jquery'”

step6:重新启动vue-cli,页面组件中 script标签加如下测试代码,页面能弹出则成功

vue-cli3安装jQuery的更多相关文章

  1. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  2. 全局安装 Vue cli3 和 继续使用 Vue-cli2.x

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @ ...

  3. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  4. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  5. vue 中使用jquery

    vue-cli搭建的项目 第一种方式:npm 引包的方式 1.安装jquery npm install jquery --save 2.webpack配置 在项目根目录下的build目录下找到webp ...

  6. 10.2 Vue 环境安装

     Vue 环境安装 环境准备  nodejs 下载安装  https://nodejs.org/en/ 查看下载版本 C:\>node -v v7.6.0 C:\>npm -v 4.1.2 ...

  7. Vue CLI3 开启gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...

  8. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  9. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

  10. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

随机推荐

  1. 读《深入理解Elasticsearch》点滴-Elastic HQ监控工具

    1.多节点监控 2.类似war功能部署,tomcat即可使用 3.免费 4.ElasticHQ supports all major version of Elasticsearch from ver ...

  2. [Mathematics][MIT 18.03] Proof of a Theory about the Solution to Second-order Linear Homogeneous Differential Equation

    At first, I'd like to say thank you to MIT open courses which give me the privilege to enjoy the mos ...

  3. .Net Core 商城微服务项目系列(八):购物车

    最近加班有点多,一周五天,四天加班到11点+,心很累.原因是我当前在的这个组比较特殊,相当于业务的架构组,要为其它的开发组提供服务和监控.所以最近更新的也少,不过这个元旦三天假应该会更新三篇. 这篇是 ...

  4. 如何编写高质量的 JS 函数(3) --函数式编程[理论篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EWSqZuujHIRyx8Eb2SSidQ作者:杨昆 [编写高质量函数系列]中, <如何 ...

  5. 基于 HTML5 WebGL 的垃圾分类系统

    前言 垃圾分类,一般是指按一定规定或标准将垃圾分类储存.分类投放和分类搬运,从而转变成公共资源的一系列活动的总称.分类的目的是提高垃圾的资源价值和经济价值,力争物尽其用.垃圾在分类储存阶段属于公众的私 ...

  6. java第3天:Scanner,Random,ArrayList

    第一章:Scanner从入门到放弃 1 API的概述和使用步骤 API简称应用程序编程接口,是JDK给我们提供好的可以直接使用的类和方法,是程序员随手使用的字典. *** 2 Scanner的概述 2 ...

  7. BeetleX服务网关之限流和缓存

    限流和缓存相关是网关中两个非常重要的功能,前者是保障服务更可靠地运行,后者则可以大大提高应用的吞吐能力.Beetlex.Bumblebee微服务网关提供了两个扩展插件来实现这两个功能,分别是Beetl ...

  8. Ubuntu安装Chrome浏览器及解决启动no-sandbox问题

    1.安装浏览器 # apt-get install gonme # apt-get update # apt-get install google-chrome-stable 2.启动Chrome浏览 ...

  9. /usr/local/lib/ruby/gems/2.4.0/gems/cocoapods-1.5.3/lib/cocoapods/command.rb:118:in `git_version': Failed to extract git version from `git --version`

    问题及分析 今天做项目的时候,执行pod update报了如下错误信息: /usr/local/lib/ruby/gems/2.4.0/gems/cocoapods-1.5.3/lib/cocoapo ...

  10. mac 下修改 jenkins 端口以及Jenkins的启动、关闭与更新

    安装包安装的Jenkins修改默认端口的方法: 先关闭jenkins ; 命令行下修改端口:sudo defaults write /Library/Preferences/org.jenkins-c ...