首页
前端开发
Webpack
Vue.use自定义全局组件详解

Vue.use自定义全局组件详解

0 次浏览 0 条评论
pdf
pdf

自己的全局组件的封装和注册，确实是 Vue 项目里绕不开的一环。用惯了别人家的 UI 库，像 Element-UI，你肯定知道 Vue.use() 是个啥。但多人没注意，其实你也能把自己写的组件像插件一样挂上去，用起来还挺丝滑。

webpack-simple 脚手架的项目结构比较清爽，适合练手。你直接在 main.js 里引入， Vue.use() 一下，就能全局注册组件了，像用 Element-UI 那样。是不是比你想的简单？

建议你先写一个简单组件，比如 MyButton.vue，在 index.js 里封装一下：

import MyButton from './MyButton.vue';
export default {
  install(Vue) {
    Vue.component('MyButton', MyButton);
  }
};

在 main.js 里这么搞：

import Vue from 'vue';
import App from './App.vue';
import MyPlugin from './components/index';


Vue.use(MyPlugin);


new Vue({
  render: h => h(App)
}).$mount('#app');

整个流程不复杂，注册完以后在任何页面都能直接用 ，挺方便的。如果你写了一堆常用组件，不妨都整理成插件包，项目间复用效果也不错。

如果你对组件封装这块还不太熟，可以参考 Vue 与 Element-UI 构建后台系统 这类项目，实战里学得更快。

pdf 文件大小：43.94KB