基于Vue-cli的一套代码支持多个项目

使用Vue-cli可以快速搭建Vue项目，但默认情况下每个项目都有单独的配置文件和依赖项，不利于维护和迭代。为了解决这个问题，我们可以使用一套代码来支持多个项目，具体步骤如下：

1. 创建一个公共Vue项目

首先，我们需要创建一个公共的Vue项目，用于存放所有项目都需要共享的组件、样式和功能。可以使用Vue-cli创建一个通用的项目：

# 全局安装Vue-cli
npm install -g @vue/cli

# 创建一个新项目
vue create common-project

在创建项目时可以选择Manually select features(手动选择特性)选项，取消勾选所有默认选项，手动添加Babel和Router等必要模块。

1. 创建一个项目模版

接着，我们可以创建一个项目模版，用于快速生成新项目。可以在公共项目下创建一个基础模版，包含一些通用的页面和组件：

# 在公共项目下创建一个项目模版
vue create --preset ./path/to/preset my-project

其中，preset是指定的预设配置文件，这里指定为本地路径下的preset.json文件，可以在里面设置默认的依赖项和配置。

1. 使用项目模版生成新项目

然后，我们可以使用项目模版生成新的项目。可以选择在公共项目下创建一个脚本，用于方便地生成新项目：

# 在公共项目的 package.json 里添加一个 script
{
  "scripts": {
    "create-project": "vue create --preset ./path/to/preset"
  }
}

# 使用命令创建新项目
npm run create-project my-new-project

这样就可以自动根据项目模版生成新的项目，新项目会继承公共项目的依赖项和配置。

示例1：创建Web应用和移动端应用

假设我们需要创建一个Web应用和一个移动端应用，它们都需要共享一些通用的组件和功能，同时又有一些自己独有的页面和样式。可以按照上述步骤创建一个公共Vue项目和项目模版，然后分别生成两个新项目。

# 生成Web应用
npm run create-project web-app

# 生成移动端应用
npm run create-project mobile-app

这样就可以快速创建两个新项目了，它们都是基于同一套代码来生成的，但是每个项目可以根据需要进行定制。

示例2：创建多个应用的微前端架构

另外，如果需要构建一个支持多个子应用的微前端架构，同样可以使用这个方法。可以根据需要创建多个项目模版，分别用于生成不同类型的应用，包括首页、商品列表、购物车等子应用，然后使用公共项目作为容器项目，将所有子应用集成到一起。

# 创建容器项目
vue create container-app

# 创建多个子应用
npm run create-project web-app
npm run create-project product-app
npm run create-project cart-app

利用这种方式可以实现微前端架构中的子应用管理，方便维护和升级。

总结：

通过使用一套代码来支持多个项目，可以大大简化代码管理和维护工作，同时也提高了项目开发和部署的效率。本文介绍了使用Vue-cli创建一个公共Vue项目，创建一个项目模版和使用模版生成新项目的方法，并结合实例说明了如何实现多个应用的共用代码支持和微前端架构。