最近学习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. mvc中在cshtml页面中如何访问静态页面.html

    把静态页面放到@Url.Content();中,如href="@Url.Content("a.html")"

  2. Oracle如何用单字段或多字段进行查重

    最近在整理数据形成信用报告,发现重复的数据真的多,梳理都好久.我就做个笔记把去掉重复数据的方法整理下来.方便我后期查阅. 我将我目前已知的两种去重方法分为:视图去重和表去重.原理就是有无rowid这个 ...

  3. 2019-8-31-dotnet-特性-DynamicallyInvokable-是用来做什么的

    title author date CreateTime categories dotnet 特性 DynamicallyInvokable 是用来做什么的 lindexi 2019-08-31 16 ...

  4. 16进制与utf-8

    很多人将数据的存储.传输方式和展现形式混为一谈. 类似的16进制 2进制是讲内容在电脑里面的存储或者传输的一种格式, 而utf-8 gb2312 等是输出的展现的一种格式 不是一回事,另外 gbk包含 ...

  5. pycharm远程调试和debug

    目的:     通过pycharm远程连接服务器,实现在pycharm上开发,代码同步到服务器(或者可以从服务器download到pycharm),利用服务器开发环境在pycharm上debug.   ...

  6. linux centos 恢复 还原 备份 Snapper 快照说明

    为什么要使用Snapper快照? 我们可以想像以下场景: 1. 场景一:系统发生意外宕机,工程师无法快速定位问题,业务受到中断,客户十分不满意. 2. 场景二:项目会议上,就是否升级某软件到最新版本, ...

  7. 在github上怎样克隆vue项目及运行

    长时间不做vue项目,今天看vue项目运行时有些指令忘记了,在这里写下相关指令 .克隆已有项目,一般情况项目中的README.md写的是项目运行步骤,一般项目的运行如下 克隆项目 git clone ...

  8. UVALive-3722 留个坑,为什么费马小定理求逆元不对??

    #include <iostream> #include <cstdlib> #include <queue> #include <algorithm> ...

  9. day09 samba、nginx服务配置

    samba 1.环境准备 [root@localhost ~]# iptables -F #清除防火墙配置 [root@localhost ~]# systemctl stop firewalld # ...

  10. idea加载完文件报错:java:-source 1.7中不支持lambda表达式 解决方案

    1.file - Project Structure ctrl+alt+shift+s 2.modules 中把7换成8