如何将常见的HTML提取到Vue App的组件中？

将常见的HTML提取到Vue App的组件中可以通过以下步骤实现：

1. 创建Vue组件：首先，在Vue项目中创建一个新的组件文件，可以使用.vue文件格式。可以使用Vue CLI或手动创建一个.vue文件。
2. 将HTML代码复制到组件中：将要提取的HTML代码复制到新创建的组件文件中的template标签中。这个HTML代码可以是任何常见的HTML标记，如div、p、span等。
3. 导入和注册组件：在Vue App的入口文件（通常是main.js）中，导入并注册新创建的组件。使用import语句导入组件，然后使用Vue.component()方法注册组件。
4. 在Vue App中使用组件：在Vue App的其他组件中，可以使用新创建的组件。在需要使用提取的HTML代码的地方，使用组件的标签名称。

这样，常见的HTML代码就被提取到了Vue App的组件中，可以在整个应用程序中重复使用。这种方法有助于提高代码的可维护性和重用性。

以下是一个示例代码：

在新创建的组件文件（例如MyComponent.vue）中：

<template>
  <div>
    <h1>Welcome to MyComponent!</h1>
    <p>This is the extracted HTML code.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  // 组件的其他配置和逻辑
}
</script>

在Vue App的入口文件（例如main.js）中：

import Vue from 'vue'
import MyComponent from './components/MyComponent.vue'

Vue.component('my-component', MyComponent)

new Vue({
  // Vue App的其他配置和逻辑
}).$mount('#app')

在Vue App的其他组件中：

<template>
  <div>
    <h2>My App</h2>
    <my-component></my-component>
  </div>
</template>

<script>
// 组件的其他配置和逻辑
</script>

这样，MyComponent组件中的HTML代码就被提取到了Vue App的组件中，并可以在其他组件中使用。