Vue3公共组件入门指南：搭建可复用组件库

本文介绍了Vue3公共组件的概念和意义，探讨了公共组件如何提高代码的复用性和开发效率，并详细讲解了如何创建和使用这些组件。Vue3公共组件可以分为多种类型，包括通用UI组件、工具类组件、业务组件等，每种类型都有其特定的功能和用途。

公共组件是可复用的UI组件，它们可以被多个Vue应用程序或项目共享。这些组件通常提供特定的功能或样式，可以独立于具体业务逻辑存在，以提高开发效率和代码重用性。

公共组件的意义在于提高代码的可维护性与复用性。它们可以减少代码冗余，提高开发效率，简化项目结构。一个良好的公共组件库可以极大地提升团队的生产力，并确保前端代码的一致性和质量。

作用

1. 提高代码复用率：定义良好的公共组件可以在不同的项目中重复使用。
2. 提高开发效率：开发人员可以专注于业务逻辑，而不是重复实现相同的UI组件。
3. 确保组件一致性：公共组件库有助于保持项目间组件的一致性，避免代码风格差异。
4. 便于维护：集中的组件库使得组件的维护和更新更加容易。

公共组件可以大致分为以下几类：

1. 通用UI组件：比如按钮、表单、下拉菜单等。
2. 工具类组件：比如加载指示器、分页器、对话框等。
3. 业务组件：虽然这些组件通常与特定业务相关，但它们也可以被其他业务共享，例如，一个电商网站可能有一个商品列表组件，这个组件也可以被书籍或电子产品的应用所使用。
4. 状态管理组件：用于管理应用全局状态的组件，如Vuex组件。
5. 数据展示组件：专门用于展示数据的组件，如表格、图表等。这些组件通常用于展示复杂的数据结构，例如数据表格和图表组件可以用于展示商品销售数据，从而帮助用户进行数据分析。

在创建公共组件之前，需要安装一些必要的库。这些库包括Vue3本身、Vue CLI和一些用于构建和测试组件的工具。

安装Vue3

npm install vue@next

安装Vue CLI

安装Vue CLI可以方便地生成和管理Vue项目。

npm install -g @vue/cli

安装其他依赖库

安装其他依赖库如babel、eslint等，用于编译、格式化和测试代码。

npm install --save-dev @vue/cli-plugin-babel @vue/cli-plugin-eslint

以一个简单的按钮组件为例，来展示如何创建一个Vue3公共组件。

创建组件文件

在项目中创建一个名为components的文件夹，并在其中创建一个名为Button.vue的文件。这是一个简单的按钮组件，它接受一个type属性来改变按钮的样式。

<template>
  <button :class="['btn', `btn-${type}`]" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event);
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  outline: none;
}
.btn-primary {
  background: #1a73e8;
  color: white;
}
.btn-secondary {
  background: #f5f5f5;
  border: 1px solid #ccc;
  color: #333;
}
</style>

在其他组件中引入并使用

在其他组件中引入并使用这个公共按钮组件，可以在模板中直接使用。

<template>
  <div>
    <Button type="primary" @click="handlePrimaryClick">
      Primary Button
    </Button>
    <Button type="secondary" @click="handleSecondaryClick">
      Secondary Button
    </Button>
  </div>
</template>

<script>
import Button from '../components/Button.vue';

export default {
  components: {
    Button
  },
  methods: {
    handlePrimaryClick(event) {
      console.log('Primary button clicked:', event);
    },
    handleSecondaryClick(event) {
      console.log('Secondary button clicked:', event);
    }
  }
}
</script>
``

## 创建工具类组件
### 创建加载指示器组件
创建一个加载指示器组件来展示加载状态。

```vue
<template>
  <div class="spinner"></div>
</template>

<script>
export default {
  name: 'LoadingIndicator'
}
</script>

<style scoped>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #1a73e8;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

创建分页器组件

创建一个分页器组件用于处理分页逻辑。

<template>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li v-for="page in pages" :key="page" :class="{ active: currentPage === page }" @click="changePage(page)">
        <a href="#" class="page-link">{{ page }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pages: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.page-link {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 5px;
}
.active .page-link {
  background-color: #1a73e8;
  color: white;
}
</style>

在其他组件中引入并使用工具类组件

<template>
  <div>
    <LoadingIndicator v-if="isLoading" />
    <Pagination :pages="pages" :current-page="currentPage" @change="updatePage" />
  </div>
</template>

<script>
import LoadingIndicator from '../components/LoadingIndicator.vue';
import Pagination from '../components/Pagination.vue';

export default {
  components: {
    LoadingIndicator,
    Pagination
  },
  data() {
    return {
      isLoading: true,
      currentPage: 1,
      pages: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    updatePage(page) {
      this.currentPage = page;
      this.isLoading = false;
    }
  }
}
</script>

将公共组件注册为全局组件，可以在整个应用中直接使用。

import Vue from 'vue';
import Button from './components/Button.vue';

Vue.component('Button', Button);

在需要使用组件的单个Vue组件中进行局部引入和注册。

<template>
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
</template>

<script>
import Button from './Button.vue';

export default {
  components: {
    Button
  }
}
</script>

引入和使用工具类组件

<template>
  <div>
    <LoadingIndicator v-if="isLoading" />
    <Pagination :pages="pages" :current-page="currentPage" @change="updatePage" />
  </div>
</template>

<script>
import LoadingIndicator from './components/LoadingIndicator.vue';
import Pagination from './components/Pagination.vue';

export default {
  components: {
    LoadingIndicator,
    Pagination
  },
  data() {
    return {
      isLoading: true,
      currentPage: 1,
      pages: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    updatePage(page) {
      this.currentPage = page;
      this.isLoading = false;
    }
  }
}
</script>

如果公共组件被分发到npm，可以通过npm安装并使用它们。

发布到npm

npm publish

在项目中安装并引入

npm install vue-components-library

<template>
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
</template>

<script>
import { Button } from 'vue-components-library';

export default {
  components: {
    Button
  }
}
</script>

路由导航组件用于在页面之间导航，它通常包含导航链接和一个当前激活状态的指示器。

示例代码

<template>
  <nav>
    <ul>
      <li v-for="route in routes" :key="route.name">
        <router-link :to="route.path" :class="{ active: isActive(route.path) }">
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { name: 'Home', path: '/' },
        { name: 'About', path: '/about' },
        { name: 'Contact', path: '/contact' }
      ]
    };
  },
  methods: {
    isActive(path) {
      return this.$route.path === path;
    }
  }
}
</script>

<style scoped>
nav ul {
  list-style: none;
  padding: 0;
}
nav li {
  display: inline-block;
  margin-right: 10px;
}
nav a {
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}
nav a.active {
  background-color: #1a73e8;
  color: white;
}
</style>

通用表单组件用于收集和验证用户输入，通常包含输入框、选择器、复选框等元素。

示例代码

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" v-model="name" />
    </div>
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" v-model="email" />
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted:', this.name, this.email);
    }
  }
}
</script>

<style scoped>
form div {
  margin-bottom: 10px;
}
</style>

按钮组件用于触发事件，如导航、提交表单等，它可以有一个简单的默认样式或者根据需要自定义。

示例代码

<template>
  <button :class="['btn', `btn-${type}`]" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event);
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  outline: none;
}
.btn-primary {
  background: #1a73e8;
  color: white;
}
.btn-secondary {
  background: #f5f5f5;
  border: 1px solid #ccc;
  color: #333;
}
</style>

加载指示器组件用于展示加载状态。

示例代码

<template>
  <div class="spinner"></div>
</template>

<script>
export default {
  name: 'LoadingIndicator'
}
</script>

<style scoped>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #1a73e8;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

分页器组件用于处理分页逻辑。

示例代码

<template>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li v-for="page in pages" :key="page" :class="{ active: currentPage === page }" @click="changePage(page)">
        <a href="#" class="page-link">{{ page }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pages: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  list-style-type: none;
  padding: 0;
}
.page-link {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 5px;
}
.active .page-link {
  background-color: #1a73e8;
  color: white;
}
</style>

业务组件通常与特定业务逻辑相关，但也可以被其他业务共享。

示例代码

<template>
  <div>
    <ProductList :products="products" />
  </div>
</template>

<script>
import ProductList from './ProductList.vue';

export default {
  components: {
    ProductList
  },
  data() {
    return {
      products: [
        { name: 'Product 1', price: 10 },
        { name: 'Product 2', price: 20 },
        { name: 'Product 3', price: 30 }
      ]
    };
  }
}
</script>

<style scoped>
.product {
  margin-bottom: 10px;
}
</style>

使用语义化版本号（SemVer）来管理组件版本，确保用户可以明确知道组件的更改内容。

示例代码

npm version patch
npm version minor
npm version major

编写详细的组件文档可以帮助其他开发人员更好地理解和使用你的组件。文档应包含组件的使用方法、属性、插槽、事件、示例等。

示例代码

### Button Component

#### Properties
- `type` (String): The type of the button. Default is 'primary'.

#### Events
- `click`: Triggered when the button is clicked.

#### Usage
```vue
<Button type="primary" @click="handleClick">Primary Button</Button>

Example

<template>
  <div>
    <Button type="primary" @click="handlePrimaryClick">
      Primary Button
    </Button>
    <Button type="secondary" @click="handleSecondaryClick">
      Secondary Button
    </Button>
  </div>
</template>

<script>
export default {
  methods: {
    handlePrimaryClick(event) {
      console.log('Primary button clicked:', event);
    },
    handleSecondaryClick(event) {
      console.log('Secondary button clicked:', event);
    }
  }
}
</script>

## 测试组件的稳定性和兼容性
编写测试用例以确保组件在不同场景下的稳定性和兼容性，可以使用Jest、Vue Test Utils等工具。

### 示例代码
```bash
npm install --save-dev jest @vue/test-utils

import { mount } from '@vue/test-utils';
import Button from './Button.vue';

describe('Button Component', () => {
  it('emits `click` event when clicked', () => {
    const wrapper = mount(Button);
    wrapper.find('button').trigger('click');
    expect(wrapper.emitted().click).toBeTruthy();
  });

  it('has correct default class', () => {
    const wrapper = mount(Button);
    expect(wrapper.classes()).toContain('btn-primary');
  });

  it('applies custom class based on `type` prop', () => {
    const wrapper = mount(Button, { props: { type: 'secondary' } });
    expect(wrapper.classes()).toContain('btn-secondary');
  });
});

插槽（Slot）允许组件的使用者自定义组件内部的内容，从而提高组件的灵活性和可重用性。

示例代码

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}
</style>

<template>
  <Card>
    <h2>Card Title</h2>
    <p>Card Content</p>
  </Card>
</template>

<script>
import Card from './Card.vue';

export default {
  components: {
    Card
  }
}
</script>

自定义事件可以用来在组件内部触发事件并传递数据，这可以实现更复杂的功能通信。

示例代码

<template>
  <div>
    <Input @input="handleInput" />
  </div>
</template>

<script>
import Input from './Input.vue';

export default {
  components: {
    Input
  },
  methods: {
    handleInput(value) {
      console.log('Input value:', value);
    }
  }
}
</script>

<template>
  <input type="text" @input="handleInput" />
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

动态属性和样式绑定可以使得组件根据不同的条件显示不同的样式或行为，从而提高组件的灵活性。

示例代码

<template>
  <button :class="['btn', { 'btn-disabled': isDisabled }]" @click="onClick">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false,
      buttonText: 'Click Me'
    };
  },
  methods: {
    onClick() {
      console.log('Button clicked');
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  outline: none;
}
.btn-disabled {
  background-color: #ccc;
  color: #ddd;
  cursor: not-allowed;
}
</style>
``

通过这些技巧，你可以创建出更加灵活、可重用和功能强大的Vue3公共组件。