vue项目引入jquery

VUE项目引入jquery

 

既然写项目，那么少不了用jq，那我们就引入进来吧

1、因为已经安装了vue脚手架，所以需要在webpack中全局引入jquery

通过命令下载jquery npm install jquery --save-dev

当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。

-save和save-dev可以省掉你手动修改package.json文件的步骤。 spm install module-name -save自动把模块和版本号添加到dependencies部分 spm install module-name -save-dve自动把模块和版本号添加到devdependencies部分

---------------------------可以不看(开始)------------------------------

打开package.json文件，在里面加入这行代码，jquery后面的是版本，根据你自己需求更改。 

dependencies:{
"jquery":"^2.2.1"
}

2、然后在命令行中cnpm install 

大多人应该都是使用的淘宝镜像，所以使用cnpm，如果你不是 ，可以使用npm安装。

------------------------------------(结束)-----------------------------------------------------

3、在webpack.base.conf.js中加入一行代码

var webpack=require("webpack")

4、在webpack.base.conf.js中module.exports的最后加入这行代码，

1
2
3
4
5
6
7
    plugins: [
new  webpack.optimize.CommonsChunkPlugin( 'common.js' ),
new  webpack.ProvidePlugin({
jQuery:  "jquery" ,
$:  "jquery"
})
]

 

5、在main.js中引入,加入下面这行代码，全局引入

1
import  $ from  'jquery'

 

 

6、最后一步，重新跑一遍就好，控制台输入npm run dev    

你会神奇的发现，jq可以用了！