使用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.下面我们看怎么将它引入到项目中 ...
随机推荐
- linux 系统的 cache 过大,解决方案
linux buff/cache过大,清理脚本 2018年06月20日 13:44:53 taozhe666 阅读数:6500 三条指令: sync echo 1 > /proc/sys/v ...
- 通过实例聊聊Java中的多态
Java中的多态允许父类指针指向子类实例.如:Father obj=new Child(); 那么不禁要发问?? 使用这个父类型的指针访问类的属性或方法时,如果父类和子类都有这个名称的属性或方法,哪 ...
- 清北学堂2019.8.10 & 清北学堂2019.8.11 & 清北学堂2019.8.12
Day 5 杨思祺(YOUSIKI) 今天的难度逐渐上升,我也没做什么笔记 开始口胡正解 今天的主要内容是最小生成树,树上倍增和树链剖分 最小生成树 Prim 将所有点分为两个集合,已经和点 1 连通 ...
- linux如何查看目录或文件夹的总大小--du命令
记录一下如何查看一个目录或文件夹的总大小. 使用du命令的选项-s,可以统计整个目录或文件夹的大小. 例如 du -sk ./ 156k -k表示以KB为单位计算.
- android studio中方法和类被调用多次,但是AS显示灰色,解决办法
Android Studio里面的一些类及方法,明明有被其他的类或者方法调用,但是去看的时候显示灰色,鼠标放上面的时候显示:Class ‘XXX’ is never used或者Method ‘XXX ...
- 如何数冲突域(collision domains)个数
数冲突域的核心是: switch.bridge的每个端口都是一个冲突域(因为它们有存储转发功能) hub的所有端口在同一冲突域内(因为hub本身是模拟导线,各个端口可以看成接在一起) 对下图而言 共有 ...
- Ubuntu 防火墙常用配置操作(ufw)【适用于 Debian 及其衍生版---Linux Mint、Deepin 等】-转
Ubuntu 防火墙常用配置操作(ufw)[适用于 Debian 及其衍生版---Linux Mint.Deepin 等] 点击访问
- Nginx搭建动态静态服务器
Nginx做静态资源服务器优于Tomcat 区分静态资源,动态资源请求 使用域名区分! 如果是动态资源请求 反向代理到 Tomcat 如果 是静态资源请求 直接走本地Nginx 配置: ###静态 ...
- ssh连接报错
1.ssh: connect to host 172.16.0.142 port 22: Connection refused 解决: 在sshd 被连接端输入: [root@ecs-01 ~]# e ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...