Vue中引入Jquery

1.首先在依赖中填写要引入jquery版本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

"dependencies": {

    "@babel/polyfill": "^7.12.1",

    "ant-design-vue": "^1.6.5",

    "axios": "^0.20.0",

    "element-ui": "^2.13.2",

    "hexo-helper-live2d": "^3.1.1",

    "jquery": "^3.6.0",

    "view-design": "^4.4.0",

    "vue": "^2.5.2",

    "vue-axios": "^3.1.1",

    "vue-resource": "^1.5.1",

    "vue-router": "^3.4.7",

    "wangeditor": "^4.7.10"

  },

“jquery”: “^3.6.0”–这就是要引入的Jquery及版本

2. 在build文件夹下的webpack.base.conf.js文件中加入以下代码

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   var webpack = require("webpack") module.exports = { plugins: [ new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ], ...

3. 在main.js中引入（全局）jquery

   1	import $ from 'jquery'

   注意因为第二步已经使用了jquery，不需要用在main.js中 使用vue.use()，否则：

vue-cil 浏览器控制台报错：this._init is not a function

4. 最后就是运行项目。cmd里面安装依赖了：

npm install –save jquery

如果有淘宝镜像就使用命令：

cnpm install –save jquery

至此，就可以使用jquery了，$这个符号也能被识别了。