vue使用--Jquery引入
为什么要引入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引入的更多相关文章
- 脚手架搭建的vue项目里引入jquery和bootstrap
引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- vue单页面引入CDN链接
不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- vue 和 jquery混合使用
有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- vue中import引入模块路径中@符号是什么意思
在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...
- 想在已创建的Vue工程里引入vux组件
<1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...
随机推荐
- json解析模块
json.loads(json) 把json格式的字符串转为Python数据类型 html_json = json.loads(res.text) json.dumps(python) 把 pytho ...
- php获取url中的参数
// 获取url参数值function is_set_param($param){ $current_url = $_SERVER["QUERY_STRING"]; $arr = ...
- 一份完整的PyCharm图解教程
PyCharm 是一种 Python IDE,可以帮助程序员节约时间,提高生产效率.那么具体如何使用呢?本文从 PyCharm 安装到插件.外部工具.专业版功能等进行了一一介绍,希望能够帮助到大家. ...
- Java-100天知识进阶-Java内存-知识铺(四)
知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. 1.Java内存模型是每个java程序员必须掌握理解的 2.Java内存模型的主要目标 ...
- 相关pycharm(进阶?)
记录今日发现 对于pycharm细节 注意:项目的位置可以自己定 这里的新建project,建议对python.exe 文件的选择使用自己安装的位置,如下图 create,你就有了一个解释器是你自己安 ...
- DedeCMS V5.7 SP2后台代码执行漏洞复现(CNVD-2018-01221)
dedeCMS V5.7 SP2后台代码执行漏洞复现(CNVD-2018-01221) 一.漏洞描述 织梦内容管理系统(Dedecms)是一款PHP开源网站管理系统.Dedecms V5.7 SP2 ...
- 【踩坑系列】VS2019提示 ' the package could not be found in c\users\username\nuget\packages\. '
解决步骤 1.删除对应项目下的 obj 文件夹 2.重新生成该项目
- java基础第十九篇之Xml
1:xml的概述 1.1 xml是什么 标记语言:语言中出现了<a></a>的标签 a:HTML 超文本标记语言 (语法非常严格,不能随意的定义标签) b:XML 可扩展的标记 ...
- Ubuntu的系统应用
1:最近在苹果笔记本做了双系统,启动电脑后还是蛮酷的,但是ubuntu系统安好后,没有wifi图标,于是必须连接有线网络,更新数据包才可以. 2: 常用命令 查看软件xxx安装内容#dpkg ...
- selenium 优化 提升性能
结果: 用时:7.200437545776367s用时:5.909301519393921s headless用时:4.924464702606201s headless\phone用时:4.9358 ...