微信：doyo_game
7.1实用插件：html及vue.js宏工具 自己做宏不费事
&&平时自己写宏容易忘记单词，每次都去查资料，很麻烦，所以自己做了一个小工具，使用html+vue.js。
&&&&插件区几乎没人，所以发在德区和猎人区。
&&&&一个是不用再去记忆单词，方便编写一些基础宏;另一个目的是整理一下资料，给需要的人共享一下!
&&&&一个人写，一个人测试，肯定存在不少问题，大家有什么问题随时提出来，互相讨论、解决!
&&&&目前，复杂一点的宏，小工具没法实现，可以自己手动修改宏模板的内容。
&&&&有些宏，比如：
&&&&/cast [stealth]偷袭;[nostealth,nocombat]潜行
&&&&可以写成：
&&&&/cast [stealth]偷袭
&&&&/cast [nostealth,nocombat]潜行
&&&&这样是可以用小工具实现的。
&&&&还有，/castsequence reset=.... 技能,技能,技能,技能,技能,技能,技能,技能
&&&&"技能,技能,技能,技能,技能,技能,技能,技能" 这个统一当作技能名称写在技能行，是可以用小工具做出来的。
&&&&技能有可能被删减，所以未搜录所有职业所有技能供选择，需要手工输入技能名称，适用性强一点。
&&&&对于稍微懂一些宏知识的小伙伴来说，这些应该都没问题的哈，哈哈!!!
&&&&本人喜欢pvp，尤其评级最爱，不过这个版本……队友难找，有不嫌弃的队伍(晚上时间不多，顶多2个小时玩玩pvp)可以加我，一起玩啊!
&&&&联盟-奥特兰克-小德 | 部落-黑铁-猎人
/article/286647
阅读本文后，您的心情是：（选择后可查看结果）
人气：297687
今日关注游戏问题： (vue.js)vue中使用jquery失败， 引入jquery可以使用，但是引入jquery的插件，显示没有定义？？
描述:vue中使用jquery失败， 引入jquery可以使用，但是引入jquery的插件，显示没有定义，我的思路是既然不支持import引入，能不能更改下源码使他支持模块化解决方案1:这个插件不符合任何模块化系统的规范，因此你通过 import 获取不到相应的对象或插件构造器，并且这个插件要求 jQuery 是 window 的属性（全局变量），因此用模块化的方式也比较麻烦：import $ from 'jquery'
global.$ = global.jQuery = $
require('path/to/jquery.particleground.js')然后说不定就可以调用 $('#a').particleground() 了，只是说不定，没亲测其实直接在 index.html 里用 script 引入 jquery 和 这个插件应该可以，如果有用 eslint，设置 global $解决方案2:干嘛这么想不开用了vue还用jq。。。解决方案3:不能用jq的插件是因为引入jq的插件的时候，运行那个插件的js中的$还没在vue全局中定义，所以会找不到方法。现在我知道的有两种方法：（一）1.在index.html中引入jq.js和jq插件的js2.在webpack.base.conf.js中加入全局变量$，externals: {
jquery: 'window.$'
}3.在需要用到jq插件的组件中，require jq，var $ = require('jquery')即可。（二）1.在index.html中引入jq.js2.在需要用到jq插件的组件中import插件的js，在require jq即可。如果不行的话再和我说解决方案4:不是任何插件（尤其是旧的以前的那些插件）都可以import进来的，如果不行，而且npm也找不到这个插件的源下载，只有两种选择：1、在html那里src进来2、自己改造一下插件，export 暴露一下插件的方法解决方案5:首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后npm install在webpack.base.conf.js里加入var webpack = require("webpack")在module.exports的最后加入plugins: [
new monsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
然后一定要重新npm run dev在main.js 引入就ok了import $ from 'jquery'解决方案6:我遇到了和楼主遇到了同样的问题，我是引用jquery的第三方插件jquery.mockjax.js，然后在main.js中调用require('./assets/jquery.mockjax.js')，出现$此时是undefined。我是这样解决的：通过npm install的方式去安装的jquery-mockjax，此时发现可以用了，$也有定义了。
上一篇： 下一篇：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vue省市区三级联动插件-_-
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
自己写的一个
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
数据的话可以用第三方API，
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
推荐使用这个
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
请问移动端怎么用三级联动呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：[译]怎样在Vue.js中使用jquery插件
时间： 00:05:15
&&&& 阅读：1297
&&&& 评论：
&&&& 收藏：0
使用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‘)],
‘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部分
&template&
&div id="app"&
v-cropper="cropOptions"
src="/WcvkCxl.png"
alt="jQuery Meme"&
&/template&
替换src/App.vue文件的script部分
import Cropper from ‘./directives/Cropper‘
export default {
directives: {
cropOptions: {
viewMode: 0,
zoomable: false
一些需要重点注意的地方
我们引入jQuery也不需要处理组件的初始化。
把Cropper的设置选项当做原始绑定数据。
Cropper将在初始化时渲染，再销毁时使其消失。
组件的名字可以在template用作标签使用，MyCropper转变为my-cropper。
对它进行初始化时，我们必须添加v-my-cropper元素在组件的模板里。
创建Cropper组件
这是本教程的核心。我们要创建一个Cropper指令来处理低层代码的DOM操作。在这种情况下我们要初始化Cropper。
　　自定义指令是用来提供一种机制来映射数据并任意操作DOM的行为。
创建src/directives/Cropper.js
import jQuery from ‘jquery‘
import ‘cropper‘
export default {
deep: true,
bind () {},
update (options) {
// Destroy in case it has been initialized already.
jQuery(this.el).cropper(‘destroy‘)
// Initializing directly after destroying
// didn‘t work. Wrapping it in a setTimeout
// seems to do the trick.
setTimeout(() =& {
jQuery(this.el).cropper(options)
unbind () {
jQuery(this.el).cropper(‘destroy‘)
每一个Vue自定义组件的最核心部分是其提供可以用来绑定，更新，解绑相应方法。
bind：当元素在文档中生成时只触发一次。
update：当bind方法触发后和绑定数据改变时触发，在这种情况下cropOptions只是一个对象。Vue.js自定义指令需要知道如果它的相关属性也是一个对象。这就是为什么我们需要添加deep: true在这种情况下。
unbind：当DOM元素被移除时触发，在这个方法里可以销毁组件并且移除监听的事件。
在Vue 2中会有些许变化。
vm实例被作为函数参数传递，不会被设置为this。
指令的update方法只能在数据改变后触发而不会在bind方法之后触发。
第一次运行
这是我们所能做的最小限度，让我们运行起来看看如何。
这是很快做出来的，所以我们并没有添加cropper的样式，让我们添加并再一次运行。
先添加高亮部分在src/main.js文件中
import ‘../node_modules/cropper/dist/cropper.css‘
import Vue from ‘vue‘
import App from ‘./App‘
/* eslint-disable no-new */
el: ‘body‘,
components: { App }
$ npm run dev
当所有事情都做好后，你应该看到一个图片和一个cropbox并且可以使其移动。
注：后半部分翻译待续
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！