首页手记 Vue3公共组件资料详解与实战教程

Vue3公共组件资料详解与实战教程

标签：

前端工具 Vue.js

概述

本文详细介绍了Vue3公共组件的创建方法与应用，包括了公共组件的概念、好处，以及如何在实际项目中使用和维护这些组件。文章还深入讲解了多个公共组件实例，并提供了详尽的代码示例和实用技巧。通过本文，读者可以全面了解并掌握如何在Vue3项目中有效地使用公共组件。

公共组件的概念与重要性

1.1 什么是公共组件

公共组件是指在多个页面或应用中重复使用的Vue组件。这些组件通常实现了通用的功能，例如按钮、表单、导航等。公共组件的好处在于它们可以封装复杂的逻辑和样式，使代码更易于维护和重用。

1.2 使用公共组件的好处

使用公共组件可以带来以下好处：

代码复用：公共组件可以在多个地方复用，减少了重复编写相同代码的工作量。
维护方便：当需要修改公共组件的逻辑或样式时，只需要修改一次，所有使用该组件的地方都会自动更新。
提高开发效率：开发者不需要每次都从头编写相同的组件，可以将更多精力放在应用的逻辑和功能实现上。

1.3 如何在Vue3项目中创建公共组件

在Vue3项目中创建公共组件通常涉及以下几个步骤：

创建组件文件：在项目中创建一个新的.vue文件，定义组件的模板、脚本和样式。
导入和导出组件：在组件的脚本部分，使用export default语句导出组件。
在其他组件中使用：在需要复用公共组件的地方，使用import语句导入组件，并在模板中使用<组件名 />标签。

以下是一个简单的公共组件示例：

<!-- ButtonComponent.vue -->
<template>
  <button @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
</style>
``

在其他组件中使用这个公共组件：

```vue
<template>
  <div>
    <ButtonComponent text="Hello" @click="handleButton" />
  </div>
</template>

<script>
import ButtonComponent from './ButtonComponent.vue'

export default {
  components: {
    ButtonComponent
  },
  methods: {
    handleButton() {
      console.log('Button clicked')
    }
  }
}
</script>
``

## 常见公共组件实例

### 2.1 按钮组件
按钮组件是前端开发中最常见的公共组件之一。它可以用于触发各种操作，如提交表单、导航页面等。

```vue
<!-- ButtonComponent.vue -->
<template>
  <button :class="buttonClass" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click me'
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  computed: {
    buttonClass() {
      return `btn btn-${this.type}`
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.btn-primary {
  background-color: #42b983;
  color: white;
}
.btn-secondary {
  background-color: #6c757d;
  color: white;
}
button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
</style>
``

在其他组件中使用：

```vue
<template>
  <div>
    <ButtonComponent text="Primary Button" type="primary" @click="handlePrimaryButton" />
    <ButtonComponent text="Secondary Button" type="secondary" @click="handleSecondaryButton" />
  </div>
</template>

<script>
import ButtonComponent from './ButtonComponent.vue'

export default {
  components: {
    ButtonComponent
  },
  methods: {
    handlePrimaryButton() {
      console.log('Primary button clicked')
    },
    handleSecondaryButton() {
      console.log('Secondary button clicked')
    }
  }
}
</script>
``

### 2.2 轮播图组件
轮播图组件用于在网页上展示一系列图片或内容，通常用于广告、产品展示等。

```vue
<!-- CarouselComponent.vue -->
<template>
  <div class="carousel">
    <div class="carousel-inner" :style="carouselStyle">
      <slot></slot>
    </div>
    <button class="carousel-prev" @click="prev" v-if="canPrev"></button>
    <button class="carousel-next" @click="next" v-if="canNext"></button>
  </div>
</template>

<script>
export default {
  props: {
    interval: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      currentIndex: 0,
      timer: null
    }
  },
  computed: {
    carouselStyle() {
      return {
        transform: `translateX(-${this.currentIndex * 100}%)`,
        transition: `transform ${this.interval}ms ease-in-out`
      }
    },
    canPrev() {
      return this.currentIndex > 0
    },
    canNext() {
      return this.currentIndex < this.$slots.default.length - 1
    }
  },
  methods: {
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--
      }
    },
    next() {
      if (this.currentIndex < this.$slots.default.length - 1) {
        this.currentIndex++
      }
    },
    startInterval() {
      this.timer = setInterval(() => {
        this.next()
      }, this.interval)
    },
    stopInterval() {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  mounted() {
    this.startInterval()
  },
  beforeUnmount() {
    this.stopInterval()
  }
}
</script>

<style scoped>
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner {
  display: flex;
  transition: transform 0.6s ease;
}
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 1;
}
.carousel-prev {
  left: 10px;
}
.carousel-next {
  right: 10px;
}
</style>
``

在其他组件中使用：

```vue
<template>
  <div>
    <CarouselComponent :interval="5000">
      <img class="carousel-item" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image1.jpg" alt="Image 1" />
      <img class="carousel-item" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image2.jpg" alt="Image 2" />
      <img class="carousel-item" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image3.jpg" alt="Image 3" />
    </CarouselComponent>
  </div>
</template>

<script>
import CarouselComponent from './CarouselComponent.vue'

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

<style scoped>
.carousel-item {
  width: 100%;
  display: block;
}
</style>
``

### 2.3 表格组件
表格组件用于展示和操作数据，是数据展示的常见方式。它可以包含排序、筛选等功能。

```vue
<!-- TableComponent.vue -->
<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key" @click="sort(column.key)">
          {{ column.label }}
          <span v-if="sortedBy === column.key" class="sort-icon" :class="sortedAsc ? 'asc' : 'desc'"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td v-for="column in columns" :key="column.key">
          {{ item[column.key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      sortedBy: null,
      sortedAsc: true
    }
  },
  computed: {
    sortedData() {
      const data = [...this.data]
      if (this.sortedBy) {
        data.sort((a, b) => {
          const valA = a[this.sortedBy]
          const valB = b[this.sortedBy]
          if (this.sortedAsc) {
            return valA < valB ? -1 : 1
          } else {
            return valA > valB ? -1 : 1
          }
        })
      }
      return data
    }
  },
  methods: {
    sort(column) {
      if (this.sortedBy === column) {
        this.sortedAsc = !this.sortedAsc
      } else {
        this.sortedBy = column
        this.sortedAsc = true
      }
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  cursor: pointer;
}
.sort-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  width: 8px;
  height: 8px;
  border-width: 2px;
  border-style: solid;
  border-color: transparent transparent transparent #000;
  transform: rotate(45deg);
}
.asc {
  transform: rotate(135deg);
}
</style>

在其他组件中使用：

<template>
  <div>
    <TableComponent :data="tableData" :columns="tableColumns" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 }
      ],
      tableColumns: [
        { key: 'id', label: 'ID' },
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' }
      ]
    }
  }
}
</script>
``

### 2.4 分页组件
分页组件用于分页展示大量数据，通常用于数据列表的展示。

```vue
<!-- PaginationComponent.vue -->
<template>
  <div class="pagination">
    <button @click="goToPage(page - 1)" :disabled="page === 1">Previous</button>
    <span>{{ page }}</span>
    <button @click="goToPage(page + 1)" :disabled="page === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    }
  },
  data() {
    return {
      page: 1
    }
  },
  methods: {
    goToPage(newPage) {
      if (newPage > 0 && newPage <= this.totalPages) {
        this.page = newPage
        // 这里可以调用父组件的方法或者直接操作数据
      }
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}
</style>

在其他组件中使用：

<template>
  <div>
    <PaginationComponent :total-items="50" :items-per-page="10" @page-change="handlePageChange" />
  </div>
</template>

<script>
import PaginationComponent from './PaginationComponent.vue'

export default {
  components: {
    PaginationComponent
  },
  methods: {
    handlePageChange(page) {
      console.log(`Page changed to ${page}`)
    }
  }
}
</script>

公共组件的编写技巧

3.1 组件的封装方法

组件的封装是一个重要的技巧，它可以帮助你更好地组织代码，提高代码复用性。以下是封装组件的一些常见方法：

将通用逻辑封装成组件：将重复使用的逻辑和样式封装成组件，便于复用。
使用Props传递参数：通过Props传递参数，以便组件在不同地方使用不同的参数。
使用Emits处理事件：通过$emit触发自定义事件，以便父组件可以监听并处理这些事件。
使用Slots动态插入内容：使用插槽（<slot>）来动态插入内容，增加组件的灵活性。

3.2 参数传递与使用

参数传递是组件化开发中非常重要的一个方面。通过Props传递参数可以让组件在不同的上下文中灵活使用。以下是一些常用的参数传递方法：

基本的Props传递：

<CustomComponent prop1="value1" prop2="value2" />

在组件中定义Props：

props: {
 prop1: {
   type: String,
   default: ''
 },
 prop2: {
   type: Number,
   default: 0
 }
}

动态Props传递：

<CustomComponent :prop1="dynamicValue1" :prop2="dynamicValue2" />

在组件中定义Props：

props: {
 prop1: {
   type: String,
   default: ''
 },
 prop2: {
   type: Number,
   default: 0
 }
}

默认Props：

<CustomComponent />

在组件中定义Props：

props: {
 prop1: {
   type: String,
   default: 'default value'
 }
}

3.3 事件绑定与处理

事件绑定是组件之间通信的重要方式。通过事件绑定，可以将子组件的事件传递给父组件，从而实现更灵活的逻辑控制。

基础事件绑定与处理：

<CustomComponent @click="handleClick" />

在组件中定义事件：

export default {
 props: {},
 methods: {
   handleClick() {
     this.$emit('click')
   }
 }
}

传递自定义事件：

<CustomComponent @custom-event="handleCustomEvent" />

在组件中定义事件：

export default {
 props: {},
 methods: {
   handleCustomEvent() {
     this.$emit('custom-event')
   }
 }
}

传递带参数的事件：

<CustomComponent @custom-event="handleCustomEventWithParams" />

在组件中定义事件：

export default {
 props: {},
 methods: {
   handleCustomEventWithParams(param1, param2) {
     this.$emit('custom-event', param1, param2)
   }
 }
}

Vue3公共组件的使用案例详解

4.1 基于公共组件的页面布局

页面布局是前端开发中的重要环节，良好的页面布局可以提升用户体验。使用公共组件可以方便地实现一致性和复用性。

示例：创建一个公共布局组件

<!-- LayoutComponent.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header,
footer {
  padding: 10px;
  background-color: #f2f2f2;
  text-align: center;
}
main {
  flex: 1;
  padding: 10px;
}
</style>

在其他组件中使用：

<template>
  <LayoutComponent>
    <template #header>
      <h1>My Website</h1>
    </template>
    <p>This is the main content.</p>
    <template #footer>
      <p>Copyright 2023</p>
    </template>
  </LayoutComponent>
</template>

<script>
import LayoutComponent from './LayoutComponent.vue'

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

4.2 动态加载公共组件的方法

动态加载公共组件可以提高应用的性能和灵活性。Vue3支持动态组件的创建和切换，可以根据需要动态加载不同的组件。

示例：动态加载组件

<template>
  <div>
    <button @click="loadComponent('ButtonComponent')">Load Button</button>
    <button @click="loadComponent('CarouselComponent')">Load Carousel</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ButtonComponent from './ButtonComponent.vue'
import CarouselComponent from './CarouselComponent.vue'

export default {
  components: {
    ButtonComponent,
    CarouselComponent
  },
  data() {
    return {
      currentComponent: null
    }
  },
  methods: {
    loadComponent(componentName) {
      this.currentComponent = componentName
    }
  }
}
</script>

4.3 单文件组件的使用

Vue3支持单文件组件（.vue文件），这种文件结构可以提高代码的组织性和可维护性。

示例：单文件组件的使用

<!-- MyComponent.vue -->
<template>
  <div>
    <p>This is MyComponent</p>
  </div>
</template>

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

<style scoped>
p {
  color: #42b983;
}
</style>

在其他组件中使用：

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

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

组件库的选择与使用

5.1 常用的Vue3组件库推荐

有许多流行的Vue3组件库可以使用，例如Vuetify、Element UI、Ant Design Vue等。这些库提供了丰富的组件，可以大大加快开发速度。

示例：使用Vuetify组件库

首先，安装Vuetify库：

npm install vuetify

然后在项目中使用Vuetify组件：

<template>
  <v-app>
    <v-main>
      <v-btn color="primary" @click="handleClick">Click me</v-btn>
    </v-main>
  </v-app>
</template>

<script>
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify()

export default {
  name: 'App',
  vuetify,
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>
``

### 5.2 如何从组件库中选择合适的组件
选择合适的组件库时，可以考虑以下因素：
- **组件的丰富性和质量**：组件库中提供的组件是否满足你的需求，组件的质量是否高。
- **社区支持和文档**：组件库是否有活跃的社区支持和详细的文档。
- **兼容性**：组件库是否与你的项目兼容，比如是否支持Vue3。
- **样式一致性**：组件库的样式是否与你的项目整体风格一致。

#### 示例：选择合适的组件库
假设你正在开发一个电子商务网站，需要选择一个合适的组件库。在选择组件库时，你可以考虑以下几个因素：
- **组件的丰富性和质量**：检查组件库是否提供了你需要的组件，如商品列表、购物车、支付页面等。
- **社区支持和文档**：查看组件库是否有活跃的社区支持和详细的文档，以便在遇到问题时能够及时获得帮助。
- **兼容性**：确保组件库支持Vue3，以避免兼容性问题。
- **样式一致性**：检查组件库的样式是否与你的项目整体风格一致，以保持一致性。

### 5.3 组件库的安装与配置
安装组件库通常只需要通过npm或yarn安装相应的库，然后在项目中引入和配置。

#### 示例：安装和配置Element UI组件库
首先，安装Element UI库：
```bash
npm install element-plus

然后在项目中使用Element UI组件：

<template>
  <div>
    <el-button @click="handleClick">Click me</el-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton
  },
  setup() {
    const handleClick = () => {
      console.log('Button clicked')
    }
    return {
      handleClick
    }
  }
}
</script>
``

## 实战练习与项目实践

### 6.1 创建一个公共组件的项目
创建一个公共组件的项目可以帮助你更好地理解和掌握公共组件的编写和使用。以下是一个简单的项目结构示例：

my-project/
├── src/
│ ├── components/
│ │ ├── ButtonComponent.vue
│ │ ├── CarouselComponent.vue
│ │ ├── TableComponent.vue
│ │ ├── PaginationComponent.vue
│ │ ├── LayoutComponent.vue
│ ├── App.vue
│ ├── main.js
├── package.json
└── README.md


### 6.2 如何将公共组件应用到实际项目中
将公共组件应用到实际项目中时，可以遵循以下步骤：

1. **创建公共组件**：在`components`文件夹中创建公共组件。
2. **导入和使用组件**：在需要使用公共组件的组件中导入并使用这些组件。
3. **配置路由和布局**：根据项目的需要配置路由和布局，使用公共组件构建页面。

#### 示例：创建一个公共组件项目
```vue
<!-- ButtonComponent.vue -->
<template>
  <button @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}
</style>

在其他组件中使用：

<template>
  <div>
    <ButtonComponent text="Primary Button" @click="handlePrimaryButton" />
  </div>
</template>

<script>
import ButtonComponent from '@/components/ButtonComponent.vue'

export default {
  components: {
    ButtonComponent
  },
  methods: {
    handlePrimaryButton() {
      console.log('Primary button clicked')
    }
  }
}
</script>

6.3 项目调试与维护

项目调试和维护是确保项目稳定运行的关键。以下是一些常用的调试和维护技巧：

使用Vue Devtools：Vue Devtools是一个强大的调试工具，可以帮助你查看组件树、状态和事件。
使用TypeScript：TypeScript可以帮助你发现和避免一些常见的错误，提高代码的可维护性。
编写单元测试：单元测试可以帮助你确保组件的逻辑是正确的，可以使用Jest等测试框架来编写单元测试。

示例：使用Vue Devtools调试组件

安装Vue Devtools扩展：

在Chrome浏览器中，访问chrome://extensions/，打开“开发者模式”，点击“加载已解压的扩展程序”。
选择vue-devtools文件夹，加载扩展。

在项目中使用Vue Devtools：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify()

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

在Chrome浏览器中打开Vue Devtools，可以查看组件树、状态和事件。

示例：编写单元测试

首先，安装Jest和Vue Test Utils：

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

然后编写一个简单的单元测试：

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ButtonComponent from '@/components/ButtonComponent.vue'

describe('ButtonComponent', () => {
  it('should display the correct text', () => {
    const wrapper = mount(ButtonComponent, {
      props: {
        text: 'Test Button'
      }
    })
    expect(wrapper.text()).toContain('Test Button')
  })

  it('should emit click event when clicked', async () => {
    const wrapper = mount(ButtonComponent)
    await wrapper.trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })
})

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕码人8056858

手记
篇

粉丝

350

获赞与收藏

1323

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3公共组件资料详解与实战教程

1.1 什么是公共组件

1.2 使用公共组件的好处

1.3 如何在Vue3项目中创建公共组件

3.1 组件的封装方法

3.2 参数传递与使用

3.3 事件绑定与处理

4.1 基于公共组件的页面布局

示例：创建一个公共布局组件

4.2 动态加载公共组件的方法

示例：动态加载组件

4.3 单文件组件的使用

示例：单文件组件的使用

5.1 常用的Vue3组件库推荐

示例：使用Vuetify组件库

6.3 项目调试与维护

示例：使用Vue Devtools调试组件

示例：编写单元测试

阅读免费教程