要使用Vue，基础要会Vue组件，其实Vue还支持看起来技术含量更高的插件。组件和插件的区别，因人而异。不过组件的教程多，插件却少的很。本篇从组件入门，深入展示插件的用法。
Vue组件的制作，非常简单，这里我们先做一个管理框架页面组件。
Vue组件
把前面写的界面提取为Vue组件
- 在 src\components下新建Admin.vue文件
- 把App.vue文件内容复制到Admin.vue
- 将Admin.vue中找到对应行并修改：
<el-container id="app"> => <el-container id="admin">
<style> => <style scoped>
- 删除Admin.vue内<style scoped>中的
html, body样式 - 修改App.vue
<template>
<admin />
</template>
<script>
import Admin from './components/Admin.vue';
export default {
name: 'App',
methods: {
},
components: {
Admin
},
};
</script>
<style>
html,body{
height: 100%;
overflow: hidden;
}
</style>
界面依旧正常显示，第一个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) {
// 逻辑...
}
}
