Vue CLI 模板中如何引入公共模板

在Vue.js开发中，Vue CLI为我们提供了便捷的项目搭建和开发环境。当我们开发多个页面或组件时，常常会遇到需要引入公共模板的情况，这样可以提高代码的复用性和开发效率。下面将介绍在Vue CLI模板中引入公共模板的方法。

创建公共模板文件。在项目的src目录下，可以新建一个components文件夹（如果不存在），然后在该文件夹中创建公共模板组件文件，例如CommonTemplate.vue。在这个文件中，编写公共模板的HTML结构、样式和相关逻辑。

接着，在需要使用公共模板的组件中引入它。假设我们有一个Home.vue组件需要使用这个公共模板，在Home.vue文件中，通过import语句引入公共模板组件：

<template>
  <div>
    <CommonTemplate />
    <!-- 这里可以添加Home组件特有的内容 -->
  </div>
</template>

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

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

这样，在Home.vue组件中就成功引入了公共模板。

如果多个组件都需要使用这个公共模板，为了避免重复引入，可以在main.js文件中进行全局注册。在main.js中添加以下代码：

import Vue from 'vue';
import CommonTemplate from '@/components/CommonTemplate.vue';

Vue.component('CommonTemplate', CommonTemplate);

全局注册后，在任何组件中都可以直接使用<CommonTemplate />标签引入公共模板，无需再逐个引入和注册。

在实际开发中，公共模板可能还会涉及到数据传递和事件交互等情况。对于数据传递，可以通过props属性将数据从父组件传递到公共模板组件；对于事件交互，可以通过$emit方法在公共模板组件中触发自定义事件，然后在父组件中监听和处理这些事件。

通过以上方法，我们可以在Vue CLI模板中方便地引入公共模板，实现代码的复用和项目的高效开发。在实际应用中，根据项目的具体需求和结构，合理设计和使用公共模板，能够大大提升开发的质量和效率。