携手 ElementUI，定制独家 UI 组件库指南

组件封装指南：

1. 第一步：初始化项目：

   • 使用 Vue CLI 创建一个新的 Vue 项目，并将其命名为 admin-ui。
   • 在项目根目录下创建一个名为 packages 的文件夹，用于存放需要打包的组件。

2. 第二步：创建第一个组件：

   • 在 packages 文件夹中创建一个名为 MyButton 的新文件夹。
   • 在 MyButton 文件夹中创建一个名为 index.vue 的文件，这是组件的主文件。
   • 在 index.vue 文件中，添加以下代码：

   <template>
     <button @click="handleClick">{{ text }}</button>
   </template>
   <script>
   export default {
     name: "MyButton",
     props: {
       text: {
         type: String,
         default: "按钮"
       }
     },
     methods: {
       handleClick() {
         console.log("按钮被点击了！");
       }
     }
   }
   </script>
   <style>
   button {
     padding: 12px 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: #f5f5f5;
     color: #333;
     cursor: pointer;
   }
   </style>
   

3. 第三步：注册组件：

   • 在 main.js 文件中，将 MyButton 组件注册为全局组件：

   import MyButton from '@/packages/MyButton'
   Vue.component('MyButton', MyButton)
   

4. 第四步：使用组件：

   • 在任何 Vue 组件中，都可以使用 MyButton 组件：

   <template>
     <MyButton text="这是一个按钮" />
   </template>
   

5. 第五步：打包组件库：

   • 使用以下命令打包组件库：

   cd packages
   npm run build
   

   • 这将生成一个名为 dist 的文件夹，其中包含打包好的组件库。

扩展组件库：

1. 第一步：创建更多组件：

   • 重复第二步，为组件库创建更多组件。
   • 确保每个组件都有自己的文件夹和 index.vue 文件。

2. 第二步：更新组件库的入口文件：

   • 在 packages/index.js 文件中，将所有组件导入并导出：

   import MyButton from './MyButton'
   import MyDialog from './MyDialog'
   import MyInput from './MyInput'
   export {
     MyButton,
     MyDialog,
     MyInput
   }
   

3. 第三步：重新打包组件库：

   • 使用 npm run build 重新打包组件库，以确保所有新组件都包含在内。

使用组件库：

1. 第一步：安装组件库：
   • 在您的项目中安装组件库：

   npm install @your-username/admin-ui
   

2. 第二步：注册组件：
   • 在您的项目中注册组件库：

   import { MyButton, MyDialog, MyInput } from '@your-username/admin-ui'
   Vue.component('MyButton', MyButton)
   Vue.component('MyDialog', MyDialog)
   Vue.component('MyInput', MyInput)
   

3. 第三步：使用组件：
   • 在您的项目中使用组件库：

   <template>
     <MyButton text="这是一个按钮" />
     <MyDialog title="这是一个对话框">
       <p>这是一个对话框的内容。</p>
     </MyDialog>
     <MyInput placeholder="这是一个输入框" />
   </template>
   

总结：

通过遵循本指南，您可以轻松地使用 ElementUI 构建自己的 UI 组件库。这种方法使您能够创建可重复使用、易于维护的组件，从而提高您的开发效率和项目的质量。