在vue项目中正确的引入jquery
1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery
打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改。
dependencies:{
"jquery":"^2.2.3"
}
然后在命令行中cnpm install
大多人应该都是使用的淘宝镜像,所以使用cnpm,如果你不是 ,可以使用npm安装。
2:在webpack.base.conf.js中加入一行代码
var webpack=require("webpack")
3:在webpack.base.conf.js中module.exports的最后加入这行代码,
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4:在main.js中引入,加入下面这行代码
import $ from 'jquery'
5:最后一步,重新跑一边就好,cnpm run dev
以上方法我自己试过了,确认可以正常使用,如果有不对的地方欢迎联系我进行改正。
在vue项目中正确的引入jquery的更多相关文章
- 在vue项目中正确的引入jquery和bootstrap
<script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...
- 在vue项目中通过iframe引入jquery项目
最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...
- 如何在 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项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue 项目里正确地引用 jquery
一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const ...
- vue-cli项目中,全局引入jquery
命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
随机推荐
- python pywin32学习笔记
参考博客链接 https://blog.csdn.net/polyhedronx/article/details/81988948 参考博客链接 https://www.cnblogs.com/zha ...
- 收藏的链接-Qt
Qt编写的开源帖子集合(懒人专用) - QTCN开发网 - Powered by phpwind http://www.qtcn.org/bbs/read-htm-tid-85501.html?tds ...
- 13-7-return的高级使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Activiti添加批注(comment)信息
在每次提交任务的时候需要描述一些批注信息,例如:请假流程提交的时候要描述信息为什么请假,如果领导驳回可以批注驳回原因等 1.添加批注 // 由于流程用户上下文对象是线程独立的,所以要在需要的位置设置, ...
- 数组,List,Set相互转化
1.数组转化为List: String[] strArray= new String[]{"Tom", "Bob", "Jane"}; Li ...
- mongodb 3.2 yaml 配置详解及范例
mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...
- bzoj1010: [HNOI2008]玩具装箱toy——斜率优化
方程 $\Large f(i)=min(f(j)+(s(i)-s(j)-1-L)^2)$ 其中$s(i)$为i的前缀和再加上$i$ 对于某个$i$若$j$比$k$优,则 $\large f(j)+(s ...
- 【颓废篇】人生苦短, 我用python(二)
当时产生学习python的欲望便是在看dalao们写脚本的时候… 虽然dalao们好像用的是js来着.. 不过现在好像很多爬虫也可以用python写啊… 所以学python没什么不妥. 而且csdn整 ...
- win7 删除多余启动项的方法
win7已经没有像xp那么简单的boot.ini让我们修改了,取而代之的是bcdedit.现在就简单的说下bcdedit的常规应用吧.开始,运行,输入bcdedit /?可以看到帮助.简单的应用开始. ...
- Lock方法是用于数据库的锁机制,
Lock方法是用于数据库的锁机制,如果在查询或者执行操作的时候使用: lock(true); 复制代码 就会自动在生成的SQL语句最后加上 FOR UPDATE或者FOR UPDATE NOWAI ...