注: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. Highly Efficient Analysis of Glycoprotein Sialylation in Human Serum by Simultaneous Quantification of Glycosites and Site-Specific Glycoforms (通过同时定量糖基化位点和位点特异性糖型来高效分析人血清中的糖蛋白唾液酸化)-阅读人:陈秋实

    期刊名:Journal of Proteome Research 发表时间:(2019年9月) IF:3.78 单位: 中国科学院大连化学物理研究所 中国科学院大学 大连医科大学第二附属医院 物种:人 ...

  2. plsql导入导出表结构和数据对象

    一.Tools的导出表结构:export User objects 二.Tools的Export Tables选项 导出表数据:export tables (选择:exp.exe) 三. 导入表结构: ...

  3. 【ADO.NET基础-Login】带验证码验证的登录界面(用于简单的基础学习)

    以下代码如果有不对或者不妥之处,还望大神们指点一二 或者有同学者有问题或建议,一定要提出来,共同探讨 小弟在此感谢! 前台代码: <!DOCTYPE html> <html xmln ...

  4. vue2.0项目记住密码和用户名实例

    的今天突来兴致,试了一下将用户名和密码存在cookie和localStorage里如何实现:从代码难易程度来讲,果断选择了将用户名和密码存在localStorage里面.当然菜鸟上这么说的,楼下. 也 ...

  5. 防DOS攻击-网络连接法

    #!/bin/bash netstat -antup | grep SYN_RECV | awk '{print $5}' |awk -F: '{print $1}'|sort|uniq -c > ...

  6. 把功能强大的Spring EL表达式应用在.net平台

    Spring EL 表达式是什么? Spring3中引入了Spring表达式语言—SpringEL,SpEL是一种强大,简洁的装配Bean的方式,他可以通过运行期间执行的表达式将值装配到我们的属性或构 ...

  7. Cocos Creator 3D 打砖块图文教程(一)

    在线体验链接: http://example.creator-star.cn/block3d/ 上面图中是打砖块游戏的主要 3D 节点元素,Shawn 这两天在学习 Unity 与 Creator3D ...

  8. Sublime Text 3 配置 Phpcs

    Phpcs 插件介绍 可以为 Sublime Text 编辑器提供代码格式检测的功能,使用以下工具(全部可选): PHP_CodeSniffer (phpcs) Linter (php -l) PHP ...

  9. Inkscape 旋转并复制

    画一个图形,点击图标. 然后图标中心有个十字叉, 然后把这个十字叉拖到你想要旋转的地方. 然后shift+ctrl+m打开变换菜单. 选择旋转选项卡,然后设置角度,点击应用.就可以旋转了,如果配合ct ...

  10. TouchListener PK OnTouchEvent + 多点触碰

    1.基于监听的TouchListener 代码示例: 实现效果图: 实现代码: main.xml <RelativeLayout xmlns:android="http://schem ...