jq的插件 vue中引用_[译]怎样在Vue.js中使用jquery插件

使用Vue真的太棒了，但是也有可能使你头疼，当你试图使它与jquery插件混用的时候。

问题的原因是jquery与Vue是完全不同的东西，Vue是通过组件与数据绑定来进行渲染的，jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力。

我试图寻找一些东西来帮助自己解决这个问题，但是我发现一些组件所做的工作不是很让我满意，所以让我告诉你怎样使Vue与jquery插件混用。

这么做的目的是什么？

大多数情况下你能使用jquery和一些简单的Vue来满足你的需求，Modals, sliders等等和一些Vue组件结合起来是很快的。

所以我们的目标是用强大的jQuery插件与Vue快速结合。

我们将...

用Vue的自定义指令来构建jquery

当元素生成时初始化插件

当元素撤销时销毁插件

发送事件来通知组件

从组件接收事件并将它们传递给插件

教程时间

我选择Fengyuan Chen’s的cropper因为它是一个很棒的jQuery插件，如果时间限制在60分钟之内的话你肯定不可能重写这个插件在不使用Vue的情况下。

我将从最开始来演示，如果你已经完成请跳过这个部分。

创建项目

#install vue-cli

$ npm install -g vue-cli#create a new project using the "webpack" boilerplate

$ vue init webpack vue-cropper? Project name "vue-cropper"

? Project description "A Vue.js project"

? Author "Christian Gambardella "

? Use ESLint to lint your code? "Yes"

? Pick an ESLint preset "Standard"

? Setup unit tests with Karma + Mocha? "No"

? Setup e2e tests with Nightwatch? "No"

$ cd vue-cropper$ npm install

祝贺你已经有了一个Vue的项目。

安装 jQuery 和 cropper.js

#install jQuery & cropper

$ npm install jquery cropper --save

为jquery和Vue自定义指令配置webpack

为webpack配置添加jquery和Vue自定义指令的映射。

通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。

您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。

这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。

把下面高亮部分添加到build/webpack.base.conf文件中。

resolve: {

extensions: ['', '.js', '.vue'],

fallback: [path.join(__dirname,'../node_modules')],

alias: {'src': path.resolve(__dirname, '../src'),'assets': path.resolve(__dirname, '../src/assets'),'components': path.resolve(__dirname, '../src/components'),'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'),'directives': path.resolve(__dirname, '../src/directives')

}

},

不要忘了在末尾添加逗号。

准备应用组件

我要开始使用组件，因为我相信这是更容易理解的，漂亮和简单的组件。如果你已经知道如何在组件中使用它们那么就可以立即写这个指令来实现它们。

替换src/App.vue文件的template部分