1.首先执行:npm install  jQuery --save-dev,在package.json里加入jQuery。

2.修改build下的webpack.base.conf.js

方法一:

首先加入:

const webpack = require("webpack")

然后在module.exports 对象中加入:

  plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

方法二:

先加入:

const webpack = require("webpack")

然后:

  resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'jquery': 'jquery'
}
},

最后:

  plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

3.在app.vue中调用jquery

  mounted: function() {
console.log($);
console.log($('#ss')[0].innerHTML);
},

打印结果:

在vue项目中,将juery设置为全局变量的更多相关文章

  1. 在vue项目中设置BASE_URL

    在vue项目中设置BASE_URL 1.在config文件夹中新建global.js文件 const BASE_URL = 'http://192.168.1.62:8080/rest/' expor ...

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

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

  3. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  5. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  6. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  7. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  8. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  9. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  10. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

随机推荐

  1. docker 1.12

    curl https://releases.rancher.com/install-docker/1.12.sh | sh http://rancher.com/docs/rancher/v1.6/e ...

  2. svn 外部引用别的项目文件

    建立了一个文件目录E:\My\myproject 想在该目录下有一个文件夹引用别的工程的文件. 1.在E:\My\myproject 空白处右键属性. 2.点击Properties,弹出 3.点击ne ...

  3. 页面的beforeunload和unload的事件应用

    博主最近遇到一个需求,需要在用户离开之前给一个提示,是否确认离开,并且用户确认离开的话,需要发出一个请求 下面直接上代码: <!DOCTYPE HTML> <html> < ...

  4. CF1195A

    CF1195A 题意: 输入n和k,n是学生的数量,k是饮料种类,接下来的n行会输入每个学生想要的饮料的编号,分配饮料是按一对一对分,每一对都是类型相同的饮料.输出能得到自己想要饮料的最大学生数量 解 ...

  5. jQuery源代码学习之十——动画Animate

    一.Animate模块的代码结构 // 定义了一些变量 tweeners = {}; function createFxNow() {} function createTween() {} funct ...

  6. Ryu控制器安装部署和入门

    Ryu官网简介,原滋原味 Ryu is a component-based software defined networking framework. Ryu provides software c ...

  7. grindtest 测试

    性能工程的性能测试 测试的关键趋势之一是将性能测试角色不断转变为成熟的性能工程角色.性能工程现在不仅包括测试方面,还包括监控系统性能.资源的自动伸缩.A/B 测试.ELB.数据库优化.瓶颈识别和监控. ...

  8. 【git 命令总结】一

    git help config init commit diff rename mv rm head revert reset branch checkout branch-diff fast-for ...

  9. Linux设备驱动程序 之 内存池

    内核中有些地方的内存分配是不允许失败的,为了确保这种情况下的成功分配,内核开发者建立了一种称为内存池的抽象:内存池其实就是某种形式的后备高速缓存,它试图始终保存空闲的内存,以便在紧急状态下使用: me ...

  10. xpath 轴定位表达方式

    xpath的使用基本语法: 1.// 从根节点开始,查找对象是全文. 2./ 从当前标签的路径开始查找 3.text()获取当前路径下的文本 4.@+类名或者id名 查找类名或者id的名字 5. .一 ...