最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的。

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的更多相关文章

  1. 在vue项目中正确的引入jquery和bootstrap

    <script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...

  2. 在vue项目中通过iframe引入jquery项目

    最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...

  3. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

  4. 如何在 vue 项目里正确地引用 jquery

    转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 / ...

  5. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  6. vue 项目里正确地引用 jquery

    一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const ...

  7. vue-cli项目中,全局引入jquery

    命令行执行 npm install --save jquery 找到webpack.base.conf.js文件,写入代码: const webpack = require('webpack') 在m ...

  8. 在vue项目中引入jquery

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

  9. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

随机推荐

  1. python Six 模块

    Six模块用于python2和python3的兼容 import six 官网链接:https://six.readthedocs.io/

  2. 执行sql查询,并查看语句执行花费时间

    declare @d datetimeset @d=getdate() select * from A PRINT '[语句执行花费时间(毫秒)]'+LTRIM(datediff(ms,@d,getd ...

  3. iOS开发系列-文件上传

    概述 Http协议对文件上传协议要求的 1. 必须设置请求头Content-Type为multipart/form-data.在iOS中后面需要跟上分隔符比如:boundary=----WebKitF ...

  4. 1、docker centos 安装

    Docker for CentOS: 第一步:使用官方yum仓库 [root@linux-node1 ~]# yum install -y yum-utils [root@linux-node1 ~] ...

  5. 几何+map套set——cf1163C

    能灵活用map+set的组合就能过这题了 /* 分成三个步骤来做: 1.通过点两两构造线 by=ax+c,先求a,b,再求c,用gcd(d,b)简化 2.线去重:用map+pair 3.统计交点 */ ...

  6. Joomla - 后台系统(功能简介)

    Joomla - 后台系统简介 全局配置

  7. laravel框架5.5 连接redis和redis集群

    'redis' => [ 'client' => 'predis', 'default' => [ 'host' => env('REDIS_HOST', '127.0.0.1 ...

  8. 34 N皇后问题Ⅱ

    原题网址:https://www.lintcode.com/zh-cn/old/problem/n-queens-ii/ 34. N皇后问题 II   描述 笔记 数据 评测 讨论区 根据n皇后问题, ...

  9. iOS开发CATransform3D.h属性详解和方法使用

    1.CATransform3D简介 layer有个属性transform,是CATransform3D类型.可以使其在三维界面作平移.缩放和旋转单独或组合动画! CATransform3D结构体: / ...

  10. 微信小程序page的生命周期和音频播放及监听

    一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------on ...