Vue3公共组件学习：从入门到简单应用

Vue3公共组件学习涵盖了公共组件的创建、注册、使用和测试等各个方面，旨在提高开发效率，减少代码冗余，提升代码质量。公共组件可以被复用于多个Vue项目中，从而保持应用的一致性并简化维护工作。通过详细的步骤和示例代码，你可以轻松掌握如何在Vue3中使用公共组件。

Vue3公共组件介绍

Vue3公共组件是一种可以在多个Vue项目或组件间复用的代码块。公共组件通常处理一些通用的功能，如导航栏、按钮、模态框等，这些功能在不同的应用中会被频繁使用，通过复用它们可以提高开发效率，减少代码冗余，降低维护成本。

什么是公共组件

公共组件是可复用的Vue组件，可以在不同的Vue项目或应用中引入和使用。这些组件通常封装了特定的功能，如登录表单、文章列表、分页功能等。它们可以独立于具体的应用逻辑，因此可以在多个项目中重复利用。

使用公共组件的好处

• 提高开发效率：通过复用已经开发好的公共组件，开发者可以快速搭建应用的界面，减少重复编写代码的工作量。
• 保持一致性：公共组件可以在多个项目中保持一致的外观和行为，有助于维护应用的一致性。
• 易于维护：公共组件的代码集中管理，可以更容易地进行更新和维护，减少了在多个地方修改代码的风险。
• 提高代码质量：公共组件通常经过充分的测试和优化，具有较高的代码质量，使用它们可以提升整个项目的代码质量。

常见的公共组件类型

• 导航组件：如导航栏、侧边栏等，这些组件在Web应用中广泛使用。
• 表单组件：如登录表单、注册表单等，用于数据输入和提交。
• 列表组件：展示数据列表，如文章列表、用户列表等。
• 按钮组件：提供多种样式和功能的按钮，如提交按钮、取消按钮等。
• 模态框组件：用于展示模态对话框，如确认对话框、弹出窗口等。
• 图标组件：提供常用图标，如图标库中的图标。
• 对话框组件：用于展示对话框，如提示信息、警告信息等。

Vue3公共组件的创建

安装必备依赖

创建公共组件前，需要安装一些必要的依赖。这些依赖通常包括Vue库、开发工具和构建工具等。

安装Vue：

npm install vue@next

安装构建工具（如webpack）：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env

安装测试工具（如Jest和Vue Testing Library）：

npm install --save-dev jest @vue/test-utils

安装样式处理工具（如css-loader、style-loader等）：

npm install --save-dev css-loader style-loader sass sass-loader

创建公共组件的步骤

公共组件的创建通常包含以下几个步骤：

1. 创建组件文件：创建一个新的Vue组件文件，通常以.vue为扩展名。
2. 定义模板：在组件文件中定义HTML结构。
3. 定义样式：为组件添加样式，可以使用内联样式、外部样式表或CSS Modules等方法。
4. 定义逻辑：在组件中定义逻辑代码，如数据绑定、事件处理等。
5. 导出组件：将组件导出，以便在其他地方使用。

示例代码：

<template>
  <div class="public-component">
    <h1>{{ title }}</hibli>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'PublicComponent',
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    message: {
      type: String,
      default: '默认消息',
    },
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
};
</script>

<style scoped>
.public-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style>
``

#### 组件属性和事件的定义
组件可以通过属性（props）和事件（emits）来与父组件进行互动。

示例代码：
```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'PublicComponent',
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    message: {
      type: String,
      default: '默认消息',
    },
    customColor: {
      type: String,
      default: 'red',
    },
  },
  emits: ['custom-event'],
  methods: {
    handleClick() {
      this.$emit('custom-event', '事件被触发了');
    },
  },
};
</script>

<style scoped>
.public-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style>
``

### 注册和使用公共组件

#### 局部注册公共组件
在单个Vue组件中注册公共组件，可以在该组件内部使用。

示例代码：
```vue
<template>
  <div>
    <PublicComponent title="局部注册" message="这是一个局部注册的公共组件" />
  </div>
</template>

<script>
import PublicComponent from '@/components/PublicComponent.vue';

export default {
  components: {
    PublicComponent,
  },
};
</script>
``

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

示例代码：
```javascript
// main.js
import { createApp } from 'vue';
import PublicComponent from '@/components/PublicComponent.vue';

const app = createApp(App);
app.component('PublicComponent', PublicComponent);
app.mount('#app');
``

#### 在其他组件中使用公共组件
一旦公共组件被注册，就可以在其他组件中使用它。

示例代码：
```vue
<template>
  <div>
    <PublicComponent title="全局注册" message="这是一个全局注册的公共组件" />
  </div>
</template>

<script>
export default {
  // 全局注册的公共组件可以直接使用
};
</script>
``

### Vue3公共组件的样式和样式隔离

#### 使用CSS Modules
CSS Modules允许将CSS样式作用于特定的组件，从而使样式更具有局部性。

示例代码：
```vue
<template>
  <div class="public-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'PublicComponent',
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    message: {
      type: String,
      default: '默认消息',
    },
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
};
</script>

<style module>
.public-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style>
``

#### 使用Scoped CSS
通过在style标签中添加`scoped`属性，可以实现样式仅作用于当前组件，实现样式隔离。

示例代码：
```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'PublicComponent',
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    message: {
      type: String,
      default: '默认消息',
    },
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
};
</script>

<style scoped>
.public-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
}
</style>
``

#### CSS-in-JS
CSS-in-JS是一种将CSS样式嵌入到JavaScript中的方法，通常使用JavaScript对象来定义样式。

示例代码：
```javascript
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PublicComponent',
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    message: {
      type: String,
      default: '默认消息',
    },
  },
  setup() {
    const styles = {
      publicComponent: {
        border: '1px solid #ccc',
        padding: '20px',
        margin: '10px',
      },
    };

    return { styles };
  },
  template: `
    <div :style="styles.publicComponent">
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
      <button @click="handleClick">点击我</button>
    </div>
  `,
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
});
``

### Vue3公共组件的测试

#### 测试的基本概念
单元测试是测试代码单元（如函数或组件）的输入输出行为是否符合预期。在Vue中，可以使用诸如Jest和Vue Testing Library等工具进行单元测试和DOM测试。

#### 使用Jest进行单元测试
Jest是一种流行的JavaScript测试框架，支持断言和模拟函数等功能。

示例代码：
```javascript
import { shallowMount } from '@vue/test-utils';
import PublicComponent from '@/components/PublicComponent.vue';

describe('PublicComponent', () => {
  it('renders title and message', () => {
    const wrapper = shallowMount(PublicComponent, {
      props: {
        title: '测试标题',
        message: '测试消息',
      },
    });

    expect(wrapper.text()).toContain('测试标题');
    expect(wrapper.text()).toContain('测试消息');
  });

  it('handles click event', () => {
    const wrapper = shallowMount(PublicComponent);

    const button = wrapper.find('button');
    button.trigger('click');

    expect(wrapper.emitted('custom-event')).toBeTruthy();
  });
});

使用Vue Testing Library进行DOM测试

Vue Testing Library是一个轻量级的测试工具，专门用于Vue组件的测试，提供了强大的DOM查询功能。

示例代码：

import { render, fireEvent } from '@testing-library/vue';
import PublicComponent from '@/components/PublicComponent.vue';

describe('PublicComponent', () => {
  it('renders title and message', () => {
    const { getByText } = render(PublicComponent, {
      props: {
        title: '测试标题',
        message: '测试消息',
      },
    });

    expect(getByText('测试标题')).toBeInTheDocument();
    expect(getByText('测试消息')).toBeInTheDocument();
  });

  it('handles click event', () => {
    const { getByText } = render(PublicComponent);

    const button = getByText('点击我');
    fireEvent.click(button);

    expect(PublicComponent.emitted('custom-event')).toBeTruthy();
  });
});

共享公共组件到项目中

将组件打包发布

将公共组件打包发布，使其可以被其他项目使用。通常使用npm、yarn等包管理工具进行发布。

示例代码：

npm login
npm publish

从npm安装组件

通过npm安装公共组件到项目中。

示例代码：

npm install my-public-component

在项目中使用安装的公共组件

安装完公共组件后，可以在项目中的任意Vue组件中使用它。

示例代码：

<template>
  <div>
    <my-public-component />
  </div>
</template>

<script>
import MyPublicComponent from 'my-public-component';
export default {
  components: {
    MyPublicComponent,
  },
};
</script>
``

以上是关于Vue3公共组件的基本介绍、创建、注册、使用、测试及打包发布等步骤的详细指导。通过这些步骤，可以有效地提高开发效率和代码复用性，减少维护成本。