VUE 引入JQ

来源:互联网 发布:阿里巴巴淘宝城地址 编辑:程序博客网 时间:2024/06/05 13:21

引入jQuery

通过npm安装依赖引入

1、安装

```npm install jquery -S```

2、修改webpack配置文件

build/webpack.base.conf.js

...var webpack = require("webpack") // 1. 确保引入 webpack,后面会用到module.exports = {  ...  resolve: {    extensions: ['.js', '.vue', '.json'],    modules: [      resolve('src'),      resolve('node_modules')    ],    alias: {      'vue$': 'vue/dist/vue.common.js',      'src': resolve('src'),      'assets': resolve('src/assets'),      'components': resolve('src/components'),      // 2. 定义别名和插件位置      'jquery': 'jquery'     }  },  plugins: [    // 3. 配置全局使用 jquery    new webpack.ProvidePlugin({        $: "jquery",        jQuery: "jquery",        jquery: "jquery",        "window.jQuery": "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
  • 28
  • 29
  • 30
  • 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
  • 28
  • 29
  • 30

手动载入

手动下载jquery 放在static 目录下,如:static/js/jquery.min.js

和npm不同的只是在第二步定义别名和插件位置:

alias: {    'vue$': 'vue/dist/vue.common.js',    'src': resolve('src'),    'assets': resolve('src/assets'),    'components': resolve('src/components'),    // 2. 定义别名和插件位置    "jquery": path.resolve(__dirname, '../static/js/jquery.min.js') }
原创粉丝点击