如何在Vue中建立全局引用或者全局命令

1 一般在vue中，有很多vue组件，这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。
如果是基于vuejs编写的插件我们可以用 Vueuse()
mainjs
2 但是如果想添加一个全局命令，同时又让每个vue的文件都能用到怎么办？
第一步：最好建立一个全局的命令文件例如：directive/directivejs
第二步：利用Vuedirective()建立一个全局命令，并将它暴露出来，例如一个focus 让表单自动聚焦
directivejs
第三部步：在mainjs（入口JS文件）中将它引入，可以省略文件后缀
mainjs
这样任何一个Vue文件只要这样v-focus(命令名)，就可以很方便的用到了
3 Vuedirective() 的命令一般都是自动运行的或者说初始化等等触发的，并不能用于异步事件，怎么办？
于是我们可以用到'mixins'混合命令，你最好建立一个专门的文件夹用于存放混合命令，例如：
mixinsjs
比如 saveScrollPosition （不是vue中的saveScrollPosition）可以每次在路由跳转之间保存住浏览位置信息
注意：vue20 中 路由跳转之间会自动保存位置信息 但是有Bug（位置信息之间会相互干扰）。
所以我们从新写一个saveScrollPosition暴露出去后，在你需要的页面中混入
这样就会很方便。
4 如果你需要应用一个插件，同时他并不是基于vuejs的插件命令编写的，那你可以将它赋予Vue的原型上
例如：我想全局引用axios，我们可以这样
mainjs
然后this$>基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。
组件结构
<template>
<div class="modal" v-show="show" transition="fade">
<div class="modal-dialog">
<div class="modal-content">
<!--头部-->
<div class="modal-header">
<slot name="header">
<p class="title">{{modaltitle}}</p>
</slot>
<a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
</div>
<!--内容区域-->
<div class="modal-body">
<slot name="body">
<p class="notice">{{modaltext}}</p>
</slot>
</div>
<!--尾部, *** 作按钮-->
<div class="modal-footer">
<slot name="button">
<a v-if="modalshowCancelButton" href="javascript:void(0)" class="button {{modalcancelButtonClass}}" v-touch:tap="close(1)">{{modalcancelButtonText}}</a>
<a v-if="modalshowConfirmButton" href="javascript:void(0)" class="button {{modalconfirmButtonClass}}" v-touch:tap="submit">{{modalconfirmButtonText}}</a>
</slot>
</div>
</div>
</div>
</div>
<div v-show="show" class="modal-backup" transition="fade"></div>
</template>
模态框结构分为三部分，分别为头部、内部区域和 *** 作区域，都提供了slot，可以根据需要定制。
样式
modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling: touch;
outline: 0;
overflow: scroll;
margin: 30/@rate auto;
}
modal-dialog {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
width: 690/@rate;
padding: 50/@rate 40/@rate;
background: #fff;
}
modal-backup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 05);
}
这里只是一些基本样式，没什么好说的，这次项目是在移动端，用了淘宝的 自适应布局方案 ，@rate是切稿时候的转换率。
接口定义
/
modal 模态接口参数
@param {string} modaltitle 模态框标题
@param {string} modaltext 模态框内容
@param {boolean} modalshowCancelButton 是否显示取消按钮
@param {string} modalcancelButtonClass 取消按钮样式
@param {string} modalcancelButtonText 取消按钮文字
@param {string} modalshowConfirmButton 是否显示确定按钮
@param {string} modalconfirmButtonClass 确定按钮样式
@param {string} modalconfirmButtonText 确定按钮标文字
/
props: ['modalOptions'],
computed: {
/
格式化props进来的参数,对参数赋予默认值
/
modal: {
get() {
let modal = thismodalOptions;
modal = {
title: modaltitle || '提示',
text: modaltext,
showCancelButton: typeof modalshowCancelButton === 'undefined' true : modalshowCancelButton,
cancelButtonClass: modalcancelButtonClass modalshowCancelButton : 'btn-default',
cancelButtonText: modalcancelButtonText modalcancelButtonText : '取消',
showConfirmButton: typeof modalshowConfirmButton === 'undefined' true : modalcancelButtonClass,
confirmButtonClass: modalconfirmButtonClass modalconfirmButtonClass : 'btn-active',
confirmButtonText: modalconfirmButtonText modalconfirmButtonText : '确定',
};
return modal;
},
},
},
这里定义了接口的参数，可以自定义标题、内容、是否显示按钮和按钮的样式，用一个computed来做参数默认值的控制。
模态框内部方法
data() {
return {
show: false, // 是否显示模态框
resolve: '',
reject: '',
promise: '', // 保存promise对象
};
},
methods: {
/
确定,将promise断定为完成态
/
submit() {
thisresolve('submit');
},
/
关闭,将promise断定为reject状态
@param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
/
close(type) {
thisshow = false;
thisreject(type);
},
/
显示confirmd出,并创建promise对象
@returns {Promise}
/
confirm() {
thisshow = true;
thispromise = new Promise((resolve, reject) => {
thisresolve = resolve;
thisreject = reject;
});
return thispromise; //返回promise对象,给父级组件调用
},
},
在模态框内部定义了三个方法，最核心部分confirm方法，这是一个定义在模态框内部，但是是给使用模态框的父级组件调用的方法，该方法返回的是一个promise对象，并将resolve和reject存放于modal组件的data中，点击取消按钮时，断定为reject状态，并将模态框关闭掉，点确定按钮时，断定为resolve状态，模态框没有关闭，由调用modal组件的父级组件的回调处理完成后手动控制关闭模态框。
调用
<!-- template -->
<confirm v-ref:dialog :modal-optionssync="modal"></confirm>
<!-- methods -->
this$refsdialogconfirm()then(() => {
// 点击确定按钮的回调处理
callback();
this$refsdialogshow = false;
})catch(() => {
// 点击取消按钮的回调处理
callback();
});
用 v-ref 创建一个索引,就很方便拿到模态框组件内部的方法了。这样一个模态框组件就完成了。
其他实现方法
在模态框组件中，比较难实现的应该是点击确定和取消按钮时，父级的回调处理，我在做这个组件时，也参考了一些其实实现方案。
使用事件转发
这个方法是我的同事实现的，用在上一个项目，采用的是$dispatch和$broadcast来派发或广播事件。
首先在根组件接收dispatch过来的transmit事件，再将transmit事件传递过来的eventName广播下去
events: {
/
转发事件
@param {string} eventName 事件名称
@param {object} arg 事件参数
@return {null}
/
'transmit': function (eventName, arg) {
this$broadcast(eventName, arg);
}
},
其次是模态框组件内部接收从父级组件传递过来的确定和取消按钮所触发的事件名，点击取消和确定按钮的时候触发
// 接收事件，获得需要取消和确定按钮的事件名
events: {
'tip': function(obj) {
thisevents = {
cancel: objeventscancel,
confirm: objeventsconfirm
}
}
}
// 取消按钮
cancel：function() {
this$dispatch('transmit',thiseventscancel);
}
// 确定按钮
submit: function() {
this$dispatch('transmit',thiseventssubmit);
}
在父级组件中调用模态框如下：
this$dispatch('transmit','tip',{
events: {
confirm: 'confirmEvent'
}
});
this$once('confirmEvent',function() {
callback();
}
先是传递tip事件，将事件名传递给模态框，再用$once监听确定或取消按钮所触发的事件，事件触发后进行回调。
这种方法看起来是不是很晕？所以vue 20取消了$dispatch和$broadcast，我们在最近的项目中虽然还在用10，但是也不再用$dispatch和$broadcast，方便以后的升级。
使用emit来触发
这种方法来自 vue-bootstrap-modal ,点击取消和确定按钮的时候分别emit一个事件，直接在组件上监听这个事件，这种做法的好处是事件比较容易追踪。
// 确定按钮
ok () {
this$emit('ok');
if (thiscloseWhenOK) {
thisshow = false;
}
},
// 取消按钮
cancel () {
this$emit('cancel');
thisshow = false;
},
调用：
<modal title="Modal Title" :showsync="show" @ok="ok" @cancel="cancel">
Modal Text
</modal>
但是我们在使用的时候经常会遇到这样的场景，在一个组件的内部，经常会用到多个对话框，对话框可能只是文字有点区别，回调不同，这时就需要在template中为每个对话框都写一次，有点麻烦。

安装 jQuery 和 cropperjs
# install jQuery & cropper
$ npm install jquery cropper --save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpackbaseconf文件中。
resolve: {
extensions: ['', 'js', 'vue'],
fallback: [pathjoin(__dirname, '/node_modules')],
alias: {
'src': pathresolve(__dirname, '/src'),
'assets': pathresolve(__dirname, '/src/assets'),
'components': pathresolve(__dirname, '/src/components'),
'jquery': pathresolve(__dirname, '/node_modules/jquery/src/jquery'),
'directives': pathresolve(__dirname, '/src/directives')
}
},

const vm = new Vue()

vm就是实例

如果需要引入其他外部vue文件的组件,并且拿到其实例的话

appvue

const app = {
    data(){
        return {}
    },
    methods:{}
}
export default app

然后在主文件中

import getvue from '/appvue'
consolelog(getvue)  //这个就是拿到的其他组件中的实例

一样。vue在mianjs引入样式跟在组建内引入样式打包体积一样，mainjs中组件的引入顺序，样式引用要在router组件上面，不然会导致样式丢失 项目目录下执行npm run build进行打包。

---