如何在vue-cli webpack中全局引入jquery
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的更多相关文章
- vue-cli webpack 中全局引入 jquery
1.安装 jquery npm install jquery --save-dev 2.修改 webpack.base.conf.js 方法一 首先加入: const webpack = requir ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...
- 在Vue的webpack中结合runder函数
在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
- 如何在 vue 项目里正确地引用 jquery
转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...
- 如何在 vue 2.0+ 中引入全局的stylus文件,且能正常
由于stylus在引用时,不能像一般的css文件直接在main.js中引用,就算引用了也会只能使用转换后的css,不能使用里面的函数,方法等,原因可能是:在这里引入会被直接编译成css,不能在别的模板 ...
- Vue CLI 3 中文文档
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验,当时文档还不全,具体的使用方法并不是很清楚,大概是2月7号,收到Vue CLI 3接近Beta版的提示,作者尤雨溪也讲 ...
- vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则
第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
随机推荐
- github上搜索资源
1.进入官网 点击Explore 2.点击Trending 3.资源都在这上面,可以根据语言分类 4.搜索链接 https://github.com/trending
- Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a default value
异常信息 ### Error updating database. Cause: java.sql.BatchUpdateException: Field 'id' doesn't have a de ...
- [WinForm]委托应用①——窗口之间方法/控件调用
不传参数 第二窗口:public partial class Form2 : Form { /// <summary> /// 定义委托 /// </summary> publ ...
- mac下配置caffe
Step1:安装homebrew 如果电脑上有,暂时不装.但是在step2(或者其他需要brew的情况)加完sudo之后如果仍然报错,就需要重新安装homebrew.在终端里输入如下命令: ruby ...
- PHP-无限级分类(迭代法创建)
$area = array( array('id'=>1,'name'=>'安徽','parent'=>0), array('id'=>2,'name'=>'海淀','p ...
- 【ASP.NET MVC系列】浅谈NuGet在VS中的运用
一 概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...
- 第五节 suid/ sgid /sbit /which /locate / find /stat / ln / uname -a
复习上节课内容(重点记录)1.chown -R 递归修改目录下包含子目录和子目录下的文件的属组2.chmod -R 递归修改目录下包含子目录和子目录下的文件的权限 ================== ...
- python+selenium自动化测试_1
前言 回顾一下python+selenium基础,并整理相关知识点,分享给有需要,在前进道路上的朋友. print打印 #打印Hello World print("Hello World&q ...
- java环境配置教程jde,jre
控制面板--所有控制面板项--系统--高级系统设置--环境变量 JAVA_HOME = D:\java\jdk CLASSPATH = .;%JAVA_HOME%\lib;%JAVA_HOME%\li ...
- Android中菜单图标等系统自带的图标
Android™ 2.1 android.R.drawable Icon Resources Android™ 1.5 android.R.drawable Icon Resources Androi ...