在vue项目中正确的引入jquery

最近学习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相关推荐

jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
vue项目中按需引入viewUI
viewUI 一.按需引入二.忽略eslint编译器检测和编译检测 1.忽略编译器检测 2.编译器中忽略一.按需引入 npm install babel-plugin-import --save- ...
vue项目中element-ui全局引入按需引入按需引入报错解决
elementUI中文网址: https://element.eleme.cn/#/zh-CN/component/layout 全局引入 1.安装element-ui cnpm install el ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
vue 项目中使用 jquery
在 vue 项目中使用 jquery,具体步骤如下 1.npm 安装 jquery 命令如下,@ 后边指定安装的 jquery 版本 npm install jquery@3.2.1 不加 @ 会安装 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
php项目引入vue,怎样实现Vue项目中使用Vux
这次给大家带来怎样实现Vue项目中使用Vux,Vue项目中使用Vux的注意事项有哪些,下面就是实战案例,一起来看一下. 默认已安装vue环境 1.安装vux npm install vux --sav ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...

在vue项目中正确的引入jquery

在vue项目中正确的引入jquery相关推荐

最新文章

热门文章