在Vue CLI项目中引入公共模板的方法

在Vue CLI项目开发中，合理引入公共模板能够极大提高开发效率，避免重复编写相似代码。下面将详细介绍具体的引入方法。

一、创建公共模板文件

在项目的合适位置创建公共模板文件。通常可以在 src 目录下创建一个名为 components 的文件夹，用于存放各种组件，包括公共模板组件。比如创建一个名为 CommonTemplate.vue 的文件，在该文件中编写公共模板的代码结构和样式。例如，一个简单的公共头部导航模板可能包含品牌标识、导航链接等元素的HTML和CSS样式。

二、注册公共模板组件

在Vue中，要使用组件需要先进行注册。有全局注册和局部注册两种方式。

• 全局注册：在 main.js 文件中，通过 Vue.component 方法进行全局注册。示例代码如下：

import CommonTemplate from './components/CommonTemplate.vue';
Vue.component('common-template', CommonTemplate);

这样，在项目的任何组件中都可以直接使用这个公共模板组件。

• 局部注册：如果只在特定组件中使用公共模板，可以在该组件的 script 标签中进行局部注册。示例代码如下：

import CommonTemplate from './components/CommonTemplate.vue';
export default {
  components: {
    'common-template': CommonTemplate
  }
}

三、在组件中使用公共模板

完成注册后，就可以在需要的组件中使用公共模板了。在组件的模板部分，使用注册时定义的组件名作为标签来引入公共模板。例如：

<template>
  <div>
    <common-template></common-template>
    <p>这里是组件的其他内容</p>
  </div>
</template>

四、传递数据和事件

如果公共模板需要接收外部数据或触发事件，可以通过 props 和 $emit 来实现。在公共模板组件中定义 props 接收数据，在使用公共模板的组件中通过属性绑定传递数据；通过 $emit 触发自定义事件，实现组件间的通信。

通过以上步骤，就可以在Vue CLI项目中成功引入公共模板，提高代码的复用性和开发效率。