打造开箱即用的 Vue 脚手架工具：实现 init 功能

2023-11-25 04:26:52

继续上一篇文章的讲解，让我们继续来看如何实现 init 功能。

在上一篇文章中，我们已经完成了 Vue 脚手架工具的基本搭建工作，包括安装依赖项、配置 Webpack 和 Babel 等。接下来，我们将重点关注 init 功能的实现，以便用户能够从云端配置中获取 Meta 配置，并确定要下载的框架和模板。

第一步：从云端配置获取 Meta 配置

首先，我们需要从云端配置中获取 Meta 配置。这些配置包括框架和模板的列表，以及一些其他信息，例如框架和模板的版本号等。我们可以使用 axios 库来发送 HTTP 请求，获取这些配置信息。

import axios from 'axios';

// 从云端获取 Meta 配置
const getMetaConfig = async () => {
  const response = await axios.get('https://example.com/api/meta-config');
  return response.data;
};

获取到 Meta 配置后，我们需要将其解析成 JSON 对象。

// 将 Meta 配置解析成 JSON 对象
const parseMetaConfig = (metaConfig) => {
  return JSON.parse(metaConfig);
};

第二步：确定将要下载的框架和模板

接下来，我们需要根据 Meta 配置，确定将要下载的框架和模板。我们可以使用 Meta 配置中的框架和模板列表，以及用户输入的命令行参数，来确定要下载的框架和模板。

// 确定将要下载的框架和模板
const determineFrameworksAndTemplates = (metaConfig, argv) => {
  // 获取框架和模板列表
  const frameworks = metaConfig.frameworks;
  const templates = metaConfig.templates;

  // 获取用户输入的命令行参数
  const framework = argv.framework;
  const template = argv.template;

  // 如果用户输入了框架和模板，则直接使用用户输入的框架和模板
  if (framework && template) {
    return {
      framework,
      template,
    };
  }

  // 如果用户没有输入框架和模板，则使用默认的框架和模板
  return {
    framework: frameworks[0],
    template: templates[0],
  };
};

第三步：下载框架和模板

最后，我们需要下载框架和模板。我们可以使用 download 库来下载文件。

import download from 'download';

// 下载框架和模板
const downloadFrameworksAndTemplates = async (frameworks, templates) => {
  // 下载框架
  await Promise.all(frameworks.map((framework) => {
    return download(framework.url, `./node_modules/${framework.name}`);
  }));

  // 下载模板
  await Promise.all(templates.map((template) => {
    return download(template.url, `./templates/${template.name}`);
  }));
};