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-cli webpack中全局引入jquery的更多相关文章

  1. vue-cli webpack 中全局引入 jquery

    1.安装 jquery npm install jquery --save-dev 2.修改 webpack.base.conf.js 方法一 首先加入: const webpack = requir ...

  2. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  3. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  4. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  5. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

  6. 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常

    由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...

  7. Vue CLI 3 中文文档

    翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...

  8. vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则

    第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...

  9. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

随机推荐

  1. 程序员最常用的Linux命令

    命令 用法 说明 pwd pwd 显示当前所在目录 ls ls -al 以列表形式,显示当前目录下的所有文件和目录,大多数情况可直接用ll cd cd  /home/hadoop/hbase/ 进入到 ...

  2. Asynchronous MQTT client library for C (MQTT异步客户端C语言库-paho)

    原文:http://www.eclipse.org/paho/files/mqttdoc/MQTTAsync/html/index.html MQTT异步客户端C语言库   用于C的异步 MQTT 客 ...

  3. 工作随笔——ember框架去除url上的#号

    因为工作原因,接触到了一套非常好的前端框架--ember. ember框架高度封装,学习曲线比较陡峭. ember对于url更新的配置在config/environment.js >> l ...

  4. 《TCP-IP详解卷1:协议》【PDF】下载

    <TCP-IP详解卷1:协议>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062539 内容简介<TCP/IP详解卷1:协 ...

  5. socket编程部分API

    以TCP协议为例,UNIX的相关API int socket(int domain , int type , int protocol); 根据指定的地址族,数据类型,协议来分配一个socket的描述 ...

  6. OC学习9——反射机制

    1.OC提供了3种编程方式与运行环境进行交互: 直接通过OC的源代码:这是最常见的方式,开发人员只是编写OC源代码,而运行环境负责在后台工作. 通过NSObject类中定义的方法进行动态编程:因为绝大 ...

  7. Spring+MVC+Mybatis整合

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 什么是秒杀业务 网站售卖某产品时,规定在某个日期开始售卖限量的产品, ...

  8. rtmp流媒体搭建的所需安装包

    说明:这是基于nginx rtmp控件  搭建的rtmp流媒体服务器,在此附上的是搭建所需要的安装包,具体的搭建过程看我之前的"ubuntu流媒体搭建" 链接地址:http://p ...

  9. lesson - 14 linux系统日常管理3

    1. Linux系统服务管理工具ntsysv 类似图形界面管理工具,如果没有该命令使用 yum install -y ntsysv 安装常用服务:crond, iptables, network, s ...

  10. flask 分页

    在我们学习的过程中会遇到这么样的问题,就是在我们学习的过程中会发现需要分页处理,这里呢,给大家介绍书上说的分页. @app.route('/',methods=['GET']) @app.route( ...