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第三方插件的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. vue-cli配置jquery 以及jquery第三方插件

    只使用jquery: 1.  cnpm install jquery --save 2.   cnpm install @types/jquery --save-dev (不使用ts的不需要安装此声明 ...

  3. 脚手架搭建的vue项目里引入jquery和bootstrap

    引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.j ...

  4. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  5. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  6. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  7. 基于vue脚手架的项目打包上线(发布)方法和误区

    最近要把vue脚手架开发的一个项目上线,只知道vue脚手架是基于node的服务端项目,那么只需要 npm run dev 就可以轻松启动整个项目,当我想当然的给服务器配置合适的node环境(这里也遇到 ...

  8. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  9. web项目中引入jquery easyui

    jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中 ...

随机推荐

  1. shiro所需的依赖

    <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring< ...

  2. LeetCode82----删除排序链表中的重复元素 II

    给定一个排序链表,删除所有含有重复数字的节点,只保留原始链表中 没有重复出现 的数字. 示例 1: 输入: 1->2->3->3->4->4->5 输出: 1-&g ...

  3. [NLP] 语义网络与知识图谱入门(二)

    语义网络与知识图谱入门(二) OWL 本体声明 owl用owl:Ontology来声明一个本体.rdf:about属性为本体提供一个名称或引用.根据标准,当rdf:about属性的值为"&q ...

  4. P3956 棋盘

    P3956 棋盘 题解 注释都在代码里了 这道题可以用DFS做,记忆化搜索,维护一个money[ ][ ] 表示到达当前节点的最小花费 不需要记录VIS,因为有一个最小值判断,如果走重复的话一定会得到 ...

  5. c++中字符输入函数cin.getline在输入char与string时的不同

    cin.getline在输入char时: using namespace std; ; char name[ArSize]; char dessert[ArSize]; cout << & ...

  6. Kotlin概述

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发. Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JVM的设备上运行. JetBrai ...

  7. flutter dialog

    flutter Dialog import 'dart:math'; import 'package:flutter/material.dart'; import 'test.dart'; impor ...

  8. 阶段3 2.Spring_10.Spring中事务控制_2 作业-基于注解的AOP实现事务控制及问题分析_上

    创建maven的新项目 先复制坐标的依赖. 再把代码复制进来 先改造ioc的部分 复制上面一行代码.到下面 改成context 这里也是复制的上面两行代码.到下面改成context关键字 配置扫描的包 ...

  9. OpenCL32 for mingw

    OpenCL32 for MinGW 最新版本 2019.05.25 从 CUDA_Toolkit_10.1.168_425.25_win10 中提取的头文件和库文件: 链接: https://pan ...

  10. 安装SQL Server 2008反复提示需要安装MICROSOFT NET FRAMEWORK 3 5 SP1的一个

    在安装过.net  framework 4的系统中,安装sql server 2008的安装前提之一MICROSOFT .NET FRAMEWORK 3.5 SP1时,可能已经安装并重启了,还是提示安 ...