components

// 组件中index.js

import ComponetName from "./ComponetName"; // 组件中需要设置组件名称（name: 'ComponetName'）

export default ComponetName;

// ./components/index.js
import ComponentA from "./Component-A";
import ComponentB from "./Component-B";
import ComponentC from "./Component-C";
// ...

const components = [
  ComponentA,
  ComponentB,
  ComponentC,
  // ...
];

const install = (Vue) => {
  components.forEach((component) => Vue.component(component.name, component));
};

export default {
  install,
};

Vue2.x 中使用

// main.js
import Vue from 'vue';
import App from './App.vue';
import components from './components';


Vue.use(components);

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

Vue3.x 中使用

// main.js
import { createApp } from "vue";
import App from "./App.vue";
import components from './components';

const app = createApp(App);
app.use(components).$mount('#app');

Vue3.x 使用注意点

如果组件中使用setup语法糖，就需要想办法设置组件名称。

方法一： 使用Vue.x 的方式，再写一个script标签

<script>
export default {
  name: "ComponetName",
};
</script>

方法二: 使用 vite-plugin-vue-setup-extend 插件

// 1. npm i vite-plugin-vue-setup-extend -D

// 2. 配置 vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [vue(), VueSetupExtend()],
});

// 3. 组件中使用
<script setup name="ComponetName">
// ...
</script>