在Vue CLI项目开发中，常常会遇到多个页面需要引入公共模板的需求，这不仅能提高代码的复用性，还能极大提升开发效率。下面就来详细介绍在Vue CLI下实现这一功能的方法。

在Vue CLI项目的src目录下创建一个存放公共模板的文件夹，比如命名为common-templates。在该文件夹内创建模板文件，例如common-layout.vue。在这个模板文件中，编写通用的HTML结构、样式以及脚本逻辑。比如常见的页面头部、底部布局等都可以放在这里。

接下来，在需要引入公共模板的页面组件中进行操作。在页面组件的<template>标签内，使用<component>标签来引入公共模板。示例代码如下：

<template>
  <component :is="commonLayout"></component>
</template>

<script>
import commonLayout from '@/common-templates/common-layout.vue';

export default {
  components: {
    commonLayout
  },
  data() {
    return {
      commonLayout: 'commonLayout'
    };
  }
};
</script>

在上述代码中，通过import语句将公共模板引入，然后在components选项中进行注册。在data函数中定义一个变量commonLayout，其值对应公共模板组件的名称。

另外，还有一种通过Vue.mixin的方式来实现公共模板引入。在src目录下创建一个mixins文件夹，在其中新建一个commonMixin.js文件。在这个文件中编写公共的逻辑，例如：

export const commonMixin = {
  created() {
    // 公共的钩子函数逻辑
  }
};

然后在需要引入公共逻辑的页面组件中，通过mixins选项来引入：

<template>
  <!-- 页面内容 -->
</template>

<script>
import { commonMixin } from '@/mixins/commonMixin.js';

export default {
  mixins: [commonMixin],
  // 组件其他选项
};
</script>

这种方式可以将公共的生命周期钩子函数、数据等逻辑混入到多个页面组件中，实现公共模板部分功能的复用。

通过以上两种方法，在Vue CLI项目中能够轻松地在多个页面引入公共模板，让代码结构更加清晰，开发过程更加高效流畅。无论是简单的HTML结构复用，还是复杂的逻辑共享，都能得到很好的解决。