在vue中引入jq

用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法:

1.首先在package.json里的

dependencies加入"jquery" : "^3.2.1",

2.在终端里输入

npm install jquery --save-dev 

3.找到build文件夹下的webpack.base.conf.js文件,打开,添加:

var webpack=require('webpack')

在module.exports里输入:

        plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],

4.在入口文件main.js中输入:

import $ from 'jquery'

5.在终端输入

npm run dev

6.验证方法 在APP.vue里进行验证   看图:

希望可以帮到你!

vue引入JQ的方法的更多相关文章

  1. VUE引入jq bootstrap 之终极解决方案(测试)

    初入VUE遇见的一些问题,在网上找了些方法,再根据自己的实际项目解决的问题写得此文,,希望对你有所帮助. vue-cli快速构建项目以及引入boostrap.jq各种插件配置 vue-cli脚手架工具 ...

  2. vue里面引入jq的方法

    1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jquery 打开package.json文件,在里面加入这行代码,jquery后面的是版本,根据你自己需求更改. dependenc ...

  3. vue引入jquery的方法

    1.局部引入 通过命令下载jquery   npm install jquery --save-dev 在需要引入jquery的组件中通过import $ from 'jquery'引入即可 2.全局 ...

  4. webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理

    今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...

  5. vue的常用组件方法应用

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

  6. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  7. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  8. vue 与jq 的对比

    vue.react和angular,众所周知,他们是前端框架的3个大佬.这篇主要想对比一下用vue和用jq的区别,至于和其他框架的对比,我想vue的官网说的更为详细. 我算是独自用vue写过一个小型项 ...

  9. vue-cli中引入jquery的方法

    vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...

随机推荐

  1. Azure基础(三)- Azure的物理架构和服务保证

    Azure fundamentals - Core Cloud Services - Azure architecture and service guarantees Azure provides ...

  2. [LeetCode] 132. Palindrome Partitioning II_ Hard tag: Dynamic Programming

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  3. mysql-5.7.25 源码 安装

    mysql-5.7.25 源码 安装 编译 export INSTALL_PREFIX="/data/services" export MYSQL_INSTALL_PATH=&qu ...

  4. python编写接口初识一

    python编写接口这里用到的是他一个比较轻量级的框架 flask #!/usr/bin/python # -*- coding: UTF-8 -*- import flask,json server ...

  5. 用php实现斐波那契数列,如: 1, 1, 2, 3, 5, 8, 13, 21, 34。求出第20个数的值。

    <?php function Fibonacci($n){ if ($n <= 0) { return 0; } elseif ($n == 1) { return 1; } else { ...

  6. 1231: ykc买零食

    1231: ykc买零食时间限制: 1 Sec  内存限制: 128 MB 题目描述 ykc的班级准备举行班级聚会,而身为生活委员的ykc要为此准备好零食,这天,ykc来到了学校的新起点超市,在转了3 ...

  7. VMware卸载有残留,再安装时报错提示MSI Failed

    引用自吾爱破解论坛:https://www.52pojie.cn/thread-455779-1-1.html 解决方法:软件自动清理法: 软件 地址:下载地址1:链接:http://pan.baid ...

  8. Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件

    Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...

  9. python模块与路径

    # 切记不能与方法函数同名,否则会报错!!! # python的模块与包 分为三种: #1.标准库 #2.第三方模块 #3.自定义模块 #python 模块的引入原理: # 加入你创建了一个模块,在i ...

  10. C++ cout格式化输出

    表1:C++ 流操纵算子 流操纵算子 作  用 *dec 以十进制形式输出整数 常用 hex 以十六进制形式输出整数 oct 以八进制形式输出整数 fixed 以普通小数形式输出浮点数 scienti ...