Vue系列——在vue项目中使用jQuery及其第三方插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mr_wuch/article/details/70239728

最近学习Vue.js做一个后台管理系统，采用 vue-cli 脚手架搭建，Element作为UI框架。然后想在项目中自定义滚动条，舍弃浏览器原生滚动条，成熟的现成插件也只找到了jQuery的，所以不得不引入jQuery，下面介绍下jQuery的引入及其第三方插件的引入：

引入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"
    })
  ]
}

手动载入

手动下载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') 
}

引入jquery第三方插件

可以通过npm安装的插件

这种引入第三方插件的方法和上一节种引入echarts的方法是一样的

手动引入

未完待续。。。