最近学习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 pywin32学习笔记

    参考博客链接 https://blog.csdn.net/polyhedronx/article/details/81988948 参考博客链接 https://www.cnblogs.com/zha ...

  2. 收藏的链接-Qt

    Qt编写的开源帖子集合(懒人专用) - QTCN开发网 - Powered by phpwind http://www.qtcn.org/bbs/read-htm-tid-85501.html?tds ...

  3. 13-7-return的高级使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Activiti添加批注(comment)信息

    在每次提交任务的时候需要描述一些批注信息,例如:请假流程提交的时候要描述信息为什么请假,如果领导驳回可以批注驳回原因等 1.添加批注 // 由于流程用户上下文对象是线程独立的,所以要在需要的位置设置, ...

  5. 数组,List,Set相互转化

    1.数组转化为List: String[] strArray= new String[]{"Tom", "Bob", "Jane"}; Li ...

  6. mongodb 3.2 yaml 配置详解及范例

    mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...

  7. bzoj1010: [HNOI2008]玩具装箱toy——斜率优化

    方程 $\Large f(i)=min(f(j)+(s(i)-s(j)-1-L)^2)$ 其中$s(i)$为i的前缀和再加上$i$ 对于某个$i$若$j$比$k$优,则 $\large f(j)+(s ...

  8. 【颓废篇】人生苦短, 我用python(二)

    当时产生学习python的欲望便是在看dalao们写脚本的时候… 虽然dalao们好像用的是js来着.. 不过现在好像很多爬虫也可以用python写啊… 所以学python没什么不妥. 而且csdn整 ...

  9. win7 删除多余启动项的方法

    win7已经没有像xp那么简单的boot.ini让我们修改了,取而代之的是bcdedit.现在就简单的说下bcdedit的常规应用吧.开始,运行,输入bcdedit /?可以看到帮助.简单的应用开始. ...

  10. Lock方法是用于数据库的锁机制,

    Lock方法是用于数据库的锁机制,如果在查询或者执行操作的时候使用: lock(true); 复制代码   就会自动在生成的SQL语句最后加上 FOR UPDATE或者FOR UPDATE NOWAI ...