在vue项目中使用jquery和jquery插件

fastmock

发布于 2022-07-13 17:40:31

1.5K0

发布于 2022-07-13 17:40:31

文章被收录于专栏：fastmock

在vue 项目中使用jquery和jquery插件

Vue之所以受欢迎，主要就在于它的轻量和灵活，我们可以用vue做SPA，也可以用它做多页应用，一个页面对应一个VUE实例。而且因为他的轻量，低侵入性，所以我们可以很方便地和其他框架或者库搭配使用，那么我们怎么在基于vue的SPA应用中搭配jquery使用呢？

PS:一般我们是不建议直接用jquery操作DOM节点的，因为这有悖于VUE的核心思想（模型视图双向绑定），但是，某些情况下我们为了实现当前VUE社区没实现的，以前jquery实现了的炫酷的效果的时候，也不妨采用jquery和jquery插件来实现

引入jquery

引入jquery很简单，只需一下两步：

使用npm安装jquery依赖，或者把jquery下载到我们的本地
修改项目目录build下的webpack.base.conf.js配置文件

// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          '@': resolve('src'),
          // webpack 使用 jQuery，如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery'
      }
   },

   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代码...
}

上面的代码中，alias配置项等同于seajs中的alias配置，给一个路径起一个别名。比如说配置中的 @ 符号就指向到了我们的src目录，以后在requre或者import时就可以通过这个别名指向我们需要访问的目录或者文件了。

plugins配置项简单理解就是把下面的资源作为插件的形式导入到项目中，导入后我们就可以通过$或者jQuery访问到jquery库了。

引入jquery 插件

通过上面的配置，jquery就整合到我们的项目中了，不管在什么位置都可以直接使用了，如果要使用jquery的插件，只需要在我们要使用的组件中加载对应的插件资源就可以了（当然，要加载的资源必须是es6或者AMD，CMD模块），比如，我们经常使用的toastr提示插件

// 使用toastr
<script>
import 'assets/libs/toastr/toastr.min.css';
import toastr from 'assets/libs/toastr/toastr.min';
export default {
  data() {
    return {}
  },
  mounted() {
    toastr.success('Hello World');
  }
}
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery