Vue Component Registration All In One

Vue Component Registration All In One Vue 注册自定义组件

Vue Component Registration All In One

Vue 注册自定义组件

<template>
<div class="back-to-top-container">
<!-- back-to-top-container -->
<el-backtop target=".back-to-top-container">Back Top</el-backtop>
<slot></slot>
</div>
</template>

<script>
export default {
name: 'BackToTop',
// name: 'back-to-top',
};
</script>

<style>
/* fullscreen */
.back-to-top-container {
position: absolute;
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>

import Vue from 'vue';
// @ is an alias to /src
import BackToTop from '@/components/BackToTop.vue';
// 注册全局组件，代码分离(✅ 可以在 main.js 里面直接注册的)
Vue.component(BackToTop.name, BackToTop);
/* OR */
// Vue.use(BackToTop);

// 引入全局注册组件
import '@/global-components/GlobalBackTop.js';
Vue.use(Backtop);

<template>
<div id="app">
<!--  全局组件 wrapper & 名称转换 BackToTop => back-to-top -->
<back-to-top>
<!-- 挂载点 -->
<router-view />
</back-to-top>
</div>
</template>

​​https://vuejs.org/v2/guide/components-registration.html#Name-Casing​​

Style Guide — Vue.js

​​https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended​​

由于这些组件的使用频率很高，因此您可能希望将它们简单地全局设置，而不是将它们导入任何地方。

前缀使 Webpack 可以实现：

var requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)

requireComponent.keys().forEach(function (fileName) {
  var baseComponentConfig = requireComponent(fileName)
  baseComponentConfig = baseComponentConfig.default || baseComponentConfig
  var baseComponentName = baseComponentConfig.name || (
    fileName
      .replace(/^.+\//, '')
      .replace(/\.\w+$/, '')
  )
  // 注册全局组件
  Vue.component(baseComponentName, baseComponentConfig)
})

refs