vue-cli中使用jquery
一.安装依赖
npm install jquery --save
二.全局导入(必须先安装依赖)
第一步
在webpack.base.conf.js里加入(新版的可能找不到这个文件,你可以npm install webpack --save-dev进行手动安装)
var webpack = require("webpack")
第二步
在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
第三步
在main.js 引入
import $ from 'jquery' //你做到这一步页面中你直接使用$就是jq了
新版
直接在main.js 引入
import jquery from 'jquery' //你做到这一步页面中你直接使用$就是jq了
三.单个vue组件导入(必须先安装依赖)
然后在组件的script中
<script>
import $ from "jquery" //其实嘛你安装依赖后你在node_modlules文件中的一个文件相对路径而已
console.log($) //你可以打印瞧瞧
</script>
vue-cli中使用jquery的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- [译]怎样在Vue.js中使用jquery插件
原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue-cli3搭建的vue项目中使用jquery
装包:npm install jquery --save 方式一 全局使用 1)main.js中引入 // jquery import $ from 'jquery' Vue.prototype.$ ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- Vue项目中使用jquery插件
1.引入jquery,并且在vue.config.js里配置 config.plugin('provide') .use(webpack.ProvidePlugin, [{ $: 'jquery', ...
- vue项目中引用jquery
1.使用npm安装 npm i jquery --S //jquery要小写 2.在package.json文件dependencies里面加入jq 3.在build文件夹的webpack.base. ...
随机推荐
- Maven学习归纳(五)——继承与聚合实例讲解
一.Maven的继承 1.1 什么是继承? 继承:父工程拆分出很多子工程,可以通过父工程,统一管理依赖的版本 1.2 为什么要使用继承呢? 在A.jar 依赖着——>B.jar依赖着——> ...
- Spring系列__04AOP
AOP简介 今天来介绍一下AOP.AOP,中文常被翻译为"面向切面编程",其作为OOP的扩展,其思想除了在Spring中得到了应用,也是不错的设计方法.通常情况下,一个软件系统,除 ...
- ExpandableListView 可折叠的下拉listview
ExpandableListView用法如下 1.定义布局文件main.xml文件 <?xml version="1.0" encoding="utf-8" ...
- Linux常用命令 —— 进程类
service (CentOs6) 1.service 服务名 start -------------- 启动 2.service 服务名 stop ...
- [大数据学习研究] 4. Zookeeper-分布式服务的协同管理神器
本来这一节想写Hadoop的分布式高可用环境的搭建,写到一半,发现还是有必要先介绍一下ZooKeeper这个东西. ZooKeeper理念介绍 ZooKeeper是为分布式应用来提供协同服务的,而且Z ...
- mybatis #号与$号的区别
区别: 在sql中当传入的参数是字符型,则用#号会带上单引号,不会引起sql注入: 在sql中当传入的参数是字符型,则用$号不会带上单引号,会引起sql注入: 使用范围: 当传入的参数用于查询条件,尽 ...
- 小斌之SpringCloud 开发某某交易所
最近一个月都在弄某某交易所,让之前学的东西能够用上,在这里分享一下收货的东西吧 #### 简介 系统是进行了二次开发,用的是ZTuo开源框架第一个版本,节省了很多时间(坑也挺多,哈哈哈),文章结尾贴源 ...
- java+selenium-3.9.1多线程 打开连接截取屏幕截图
废话不多说上代码:(我是用的chrome举得例子哈) 第一步,需要chromedriver.exe 目的和调起chrome 浏览器打开连接,chromedriver.exe的版本与你的chrome版本 ...
- Java中的方法和方法重载
上次我们讲了Java中的一些基本的语法;今天我们就讲一点内容,来说说Java中的方法和方法重载以及需要注意的一些地方; 方法: Java的方法类似与其他语言的函数,是一段用来完成特定功能的代码片段, ...
- asp.net core IdentityServer4 实现 Client credentials(客户端凭证)
前言 OAuth 2.0默认四种授权模式(GrantType) 授权码模式(authorization_code) 简化模式(implicit) 密码模式(resource owner passwor ...