使用vue脚手架的项目如何引入JQuery第三方插件
1:下载jquery
npm install jquery --save
2:打开build文件夹下的webpack.base.conf.js文件:
1)在最上方 引入webpack
var webpack=require('webpack')
2)在module.exports里 配置JQuery插件:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],
3:在入口文件main.js中输入
import $ from 'jquery'
4、测试使用


最后,要补充一点:
之前的测试例子失败了,是因为我把代码没有写到 $(); 里面,具体原因再来回顾一下下~~
通俗的来讲,$(function(){})里是加载完成才运行 (一进页面就加载) 写在外面边加载边运行(一般是全局变量)
补充:
1、$(function(){...}); 的完整写法是 $(document).ready(function(){...});
作用是保证DOM(浏览器对象模型)结构渲染完成后代码再执行,避免DOM结构未完成,找不到元素的错误。另外一个作用是当成立即执行匿名函数使用,避免引入全局变量(function(){ ... })()。
var a=1; //定义一个全局变量
(function(){
var b=2;//定义一个局部变量
alert(b);//输出2
})()
alert(a);//输出1
alert(b);//报错,b未定义,Uncaught ReferenceError: b is not defined
感谢https://zhidao.baidu.com/question/391884710628993645.html~
使用vue脚手架的项目如何引入JQuery第三方插件的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- vue-cli配置jquery 以及jquery第三方插件
只使用jquery: 1. cnpm install jquery --save 2. cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明 ...
- 脚手架搭建的vue项目里引入jquery和bootstrap
引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...
- vue-cli3.0以上项目中引入jquery的方法
这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- 基于vue脚手架的项目打包上线(发布)方法和误区
最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...
- 1.vue脚手架搭建项目
前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...
- web项目中引入jquery easyui
jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中 ...
随机推荐
- JAVA使用easyexcel操作Excel
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本 ...
- Babel编辑ES6代码
1.安装babel依赖 npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babe ...
- 【转】Diamond -- 分布式配置中心
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 十四周学习总结&简易记事本
学习总结: 一.JDBC: 1.JDBC提供里一套与平台无关的标准数据库操作接口和类,只要支持java的数据库厂商,所提供的数据库都可以以使用JDBC操作. 2.JDBC的主要操作类及接口: 3.JD ...
- Daily Schedule
8.29~9.2周报: 完成Forward Path页面测试用例 2天 完成当前Return Path可执行控件的相关测试用例 1.5天 整理更新web自动化测试用例文档 1天 跟踪定位SNMP自动化 ...
- 7. 进行图片的数据补全和增强(随机亮度,随机饱和度,随机翻转) Image.open(进行图片的读入) 2.ImageEnhance.Brightness(亮度变化) 3.ImageEnhance.Contrast(饱和度变化) 4.enhance_image.transpose(图片随机翻转) 5.enhance_image.save(进行图片保存)
1.Image.open(image_path) 进行图片的打开 参数说明:image_path 表示图片的路径 2. ImageEnhance.Brightness(image) # 进行图片的 ...
- 深度学习----现今主流GAN原理总结及对比
原文地址:https://blog.csdn.net/Sakura55/article/details/81514828 1.GAN 先来看看公式: GAN网络主要由两个网络构 ...
- 十一:jinja2模板传参
从后台传参到模板,模板再渲染到前端 传参的时候,可以在html后面加上关键字传参,在模板里面用{{ 参数 }}使用即可,可以传多个参数 也可以使用**传参,取值的时候就直接取内容
- 移动手机端通过PC转接实现标签打印的解决方案
废话不多讲,由于种种原因项目上出现了移动手持录入标签信息通过pc端转接实现打印的需求,所以简单研究了一下,本来考虑使用webapi方式实现,但是发现这种方式调用打印机实现自动打印比较困难,所以转而求其 ...
- Docker 镜像的操作
1. 从docker 镜像仓库获取镜像 docker pull [镜像名] 从 docker hub 中查看版本 获取 特定版本 docker pull centos 7.6.1801 2. ...