为什么要引入jquery?

vue中一般不需要使用jquery,但当我们需要使用的某个插件没有vue的版本且又使用了jquery,那我们就需要引入jquery了

安装、配置与使用

  ①install,执行以下命令

npm install jquery --save     //如果使用了淘宝镜像可以使用cnpm

②配置,webpack.base.conf.js

//...原有代码

//添加的代码
var webpack = require('webpack') module.exports = {
//...原有代码
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
], //...原有代码
}

③使用

安装配置完成后我们就可以在需要使用的组件中使用了,在需要的位置引入即可

import $ from 'jquery'

如果需要全局设置可以放到app.vue中引入

import $ from 'jquery'
//
//let $ = require('jquery')
//window.$ = $

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

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

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

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

  4. vue单页面引入CDN链接

    不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...

  5. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  6. vue 和 jquery混合使用

    有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结 ...

  7. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  8. vue中import引入模块路径中@符号是什么意思

    在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...

  9. 想在已创建的Vue工程里引入vux组件

    <1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...

随机推荐

  1. 【Nginx】Nginx反向代理转发Host设置

    #事故现场: 服务器A(Nginx服务器):192.168.2.126 服务器B(Web服务器):192.168.2.221 服务器A反向代理服务器B,A配置了upstream为: http { up ...

  2. 搭建Tomcat服务器访问本地资源

    目标,搭建Tomcat服务器,使同网络段下其他电脑可以访问分享的文件 下载安装Tomcat 如下图,在官网http://Tomcat.apache.org/下载对应版本的Tomcat,解压安装即可 启 ...

  3. 08-蓝图&单元测试

    学习目标 能够使用代码实现蓝图对项目进行模块化 能够说出断言的作用 能够说出实现单元测试步骤 能够说出单元测试所执行方法的定义规则 Blueprint(蓝图) 随着flask程序越来越复杂,我们需要对 ...

  4. 关于 ASP.NET Core 中的 RazorPages

    Contact.cshtml @page @model ContactModel @{ ViewData["Title"] = "Contact"; } < ...

  5. oracle trunc 日期 数字 的使用例子

    /**************日期********************/1.select trunc(sysdate) from dual --2013-01-06 今天的日期为2013-01-0 ...

  6. js实现图片无缝循环跑马灯

    html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=&qu ...

  7. Python超详细的字符串用法大全

    字符串拼接 实际场景:把列表中的数据拼接成一个字符串 解决方案:使用 str.join() 方法 >>> li = ['cxk', 'cxk', 'kk', 'caibi'] > ...

  8. 仅支持基本增删改查的学生自制php操作mysql的工具类 DB.class.php (学生笔记)

    <?php class DB{ //主机地址 var $host; //用户名 var $username; //密码 var $password; //数据库名 var $dbname; // ...

  9. MySQL学习——操作表里的数据

    MySQL学习——操作表里的数据 摘要:本文主要学习了使用DML语句操作表里数据的方法. 插入数据 语法 通过传入数据插入: insert into 表名 [(列名1, …, 列名n)] values ...

  10. centos 安装gitlab

    1.开始安装依赖软件:yum -y install policycoreutils openssh-server openssh-clients postfix 2.设置postfix开机自启动,po ...