初学者指南：用Vue 3轻松创建脚手架

2024-02-12 07:59:53

了解如何使用Vue 3构建自己的自定义脚手架，为您的应用程序开发之旅提供便利。

在当今快速发展的软件开发世界中，自动化和简化开发过程至关重要。脚手架扮演着关键角色，提供预先配置的项目模板，可帮助您快速启动新项目。对于 Vue 3 应用程序，您可以利用 Vue CLI（命令行界面）的力量来创建和使用自定义脚手架。

要创建 Vue 3 脚手架，首先安装 Vue CLI：

npm i @vue/cli -g

安装后，使用以下命令创建一个新的 Vue 3 项目：

vue create project-name

在创建过程中，您将看到一个选项列表，包括选择 Vue 3 版本。确保选择最新版本以利用最新的功能和改进。

接下来，切换到新创建的项目目录：

cd project-name

现在，您可以使用以下命令运行项目：

npm run serve

这将启动一个开发服务器，您可以在其中实时查看更改。

接下来，让我们创建自定义脚手架。在项目根目录中，创建一个名为 my-vue-scaffold 的新目录。在此目录中，创建一个名为 index.js 的新文件。

在 index.js 文件中，添加以下内容：

const { prompt } = require('inquirer');
const fs = require('fs');
const ejs = require('ejs');

// 脚手架配置
const questions = [
  {
    type: 'input',
    name: 'projectName',
    message: 'Enter the name of your Vue project:',
  },
];

// 脚手架执行
const scaffold = (answers) => {
  const templateDir = './templates';
  const outputDir = `./${answers.projectName}`;
  fs.mkdirSync(outputDir);

  fs.readdir(templateDir, (err, files) => {
    files.forEach((file) => {
      ejs.renderFile(`${templateDir}/${file}`, answers, (err, result) => {
        if (err) {
          console.error(err);
          return;
        }

        fs.writeFileSync(`${outputDir}/${file}`, result);
      });
    });
  });
};

// 运行脚手架
prompt(questions).then((answers) => scaffold(answers));