要使用Vue，基础要会Vue组件，其实Vue还支持看起来技术含量更高的插件。组件和插件的区别，因人而异。不过组件的教程多，插件却少的很。本篇从组件入门，深入展示插件的用法。
Vue组件的制作，非常简单，这里我们先做一个管理框架页面组件。
Vue组件
把前面写的界面提取为Vue组件
在 src\components下新建Admin.vue文件
把App.vue文件内容复制到Admin.vue
将Admin.vue中找到对应行并修改：
=>
删除Admin.vue内
修改App.vue
import Admin from './components/Admin.vue';
export default {
name: 'App',
methods: {
},
components: {
Admin
},
};
html,body{
height: 100%;
overflow: hidden;
}
界面依旧正常显示，第一个vue组件完成
axios插件
axios用来实现异步通讯，为了演示插件的制作，我们把他包装为插件。
在src目录下新建Util目录
在Util目录下新建Http.js文件。
/**
* 这是Vue插件的介绍。
* Vue插件用来：
* 1、添加全局的东西(比如Vue-router)
* 2、扩展 Vue 实例方法(过把它们添加到 Vue.prototype 上实现)。
*/
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
