Vue编写的组件库具备按需引入和全局引用的功能

1. 组织组件库 将你的组件库组织在一个目录中，例如 src/components。

   src
     └─ components
           ├─ MyButton.vue
           ├─ MyInput.vue
           └─ index.js

2. 创建入口文件  在组件库的目录中创建一个名为 index.js 的入口文件。在该文件中，导入每个组件，并定义一个名为 install 的函数来全局注册所有组件。

   // src/components/index.js
   import MyButton from "./MyButton.vue";
   import MyInput from "./MyInput.vue";
   
   const components = [
     MyButton,
     MyInput
   ];
   
   const install = function(Vue) {
     components.forEach(component => {
       Vue.component(component.name, component);
     });
   };
   
   // 按需引入
   export {
     MyButton,
     MyInput
   };
   
   // 全局引用
   export default {
     install
   };

   现在，我们已经为组件库提供了按需引入和全局引用的功能。下面是如何在项目中使用这两种功能的方法。

3. 按需引入 在 Vue 项目中，按需引入并局部注册组件。

   // src/App.vue
   <script>
   import { MyButton } from "./components";
   
   export default {
     components: {
       MyButton,
     },
   };
   </script>

4. 全局引用 在项目的 main.js 文件中引入并全局注册组件库。

   // src/main.js
   import Vue from "vue";
   import App from "./App.vue";
   import MyComponents from "./components";
   
   Vue.use(MyComponents);
   
   new Vue({
     render: (h) => h(App)
   }).$mount("#app");

   这两种方式都有其优势：全局引用可以让所有组件都在任何地方使用，而无需单独引入；按需引入有助于减小项目的打包体积，提高应用的加载速度。​​​​​​​