返回

Vue项目脚手架0到1实现三

前端

在上一章节，我们已经简单的实现vue-cli的一个命令，基本功能为创建一个新项目并复制项目模板到本地。当然，我们还差一个环节，就是修改项目文件名称。

在第一步我们已经编写好以下代码：

const fs = require('fs-extra');
const download = require('download-git-repo');
const path = require('path');

而主要实现的逻辑为：

module.exports = async (projectName, options) => {
    const projectDir = getAbsoluteProjectPath(projectName);

    // 判断目录是否存在
    const exists = await dirExists(projectDir);
    if (exists) {
        console.log('项目已存在');
        return;
    }

    // 创建项目目录
    await fs.ensureDir(projectDir);

    // 下载模板
    const vueRepo = 'https://github.com/Huyun1991/vue-template-base.git';
    await download(vueRepo, projectDir, { clone: options.clone });

    // 拷贝package.json
    const packagePath = path.resolve(projectDir, 'package.json');
    await fs.readFile(packagePath, 'utf8').then((data) => {
        const package = JSON.parse(data);
        package.name = projectName;
        fs.writeFile(packagePath, JSON.stringify(package, null, 2), 'utf8');
    });
};

现在我们需要新增以下代码来修改项目文件夹名称：

// 判断目录是否存在
const exists = await dirExists(projectDir);
if (exists) {
    console.log('项目已存在');
    return;
}

// 创建项目目录
await fs.ensureDir(projectDir);

// 移动目录
const newProjectDir = path.resolve(projectDir, projectName);
await fs.move(projectDir, newProjectDir, { overwrite: true });

具体实现可参考：

const fs = require('fs-extra');
const download = require('download-git-repo');
const path = require('path');

module.exports = async (projectName, options) => {
    const projectDir = getAbsoluteProjectPath(projectName);

    // 判断目录是否存在
    const exists = await dirExists(projectDir);
    if (exists) {
        console.log('项目已存在');
        return;
    }

    // 创建项目目录
    await fs.ensureDir(projectDir);

    // 下载模板
    const vueRepo = 'https://github.com/Huyun1991/vue-template-base.git';
    await download(vueRepo, projectDir, { clone: options.clone });

    // 移动目录
    const newProjectDir = path.resolve(projectDir, projectName);
    await fs.move(projectDir, newProjectDir, { overwrite: true });

    // 拷贝package.json
    const packagePath = path.resolve(newProjectDir, 'package.json');
    await fs.readFile(packagePath, 'utf8').then((data) => {
        const package = JSON.parse(data);
        package.name = projectName;
        fs.writeFile(packagePath, JSON.stringify(package, null, 2), 'utf8');
    });
};

这样，我们就成功实现了项目的创建和修改文件名。

当然，现在我们的脚手架还有很多功能不完善，比如项目模板下载慢、项目依赖安装慢、项目名称不校验等。

这些问题我们将在后续的章节中逐步解决，敬请期待。