交互式创建自定义vue模板

vue脚手架能生成vue的模板，把所有的都封装好了。但是比如我们是一个专题项目，对于公司来说肯定有些自己的配置，每次用脚手架生成后，还要修改，那么我们能不能自己生成一个类似于脚手架，每次就生成封装好的模板呢。

在之前，先介绍会用的的储备知识

1. ora进度转轮

用于node的控制台进度美化
直接看栗子吧

const ora = require('ora');
const spinner = ora('进入loading状态...')
spinner.start()
setTimeout(() => {
  // spinner.stop()
  // spinner.succeed()
  // spinner.fail()
  spinner.fail('失败了')
}, 2000)

image.png

当我们创建模板过程中，更好的用户体验，显示loading状态， stop直接结束。 成功和失败 还可以传入不同的文字。

2. chalk 控制台 以 彩色显示 提示信息

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'))
console.log(chalk.blue('Hello') + 'World' + chalk.red('!')); 
console.log(chalk.blue.bgRed.bold('Hello world!'));
console.log(chalk.green('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
console.log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

image.png

3.log-symbols - 为各种日志级别提供着色的符号(控制台 左边的 ❌，✔️，⚠️，！等)

const symbols = require('log-symbols');
const chalk = require('chalk');
console.log(symbols.error, chalk.red('错误'));
console.log(symbols.warning, chalk.yellow('警告'));
console.log(symbols.info, chalk.blue('提示'));
console.log(symbols.success, chalk.green('成功'));

image.png

4.path 路径

项目中用到的

path.sep

提供平台特定的路径片段分隔符：

Windows 上是 \。
POSIX 上是 /。

console.log('foo/bar/baz'.split(path.sep)); //  [ 'foo', 'bar', 'baz' ]

path.resolve([...paths])

path.resolve() 方法会将路径或路径片段的序列解析为绝对路径

path.resolve('/目录1/目录2', './目录3');
// 返回: '/目录1/目录2/目录3'

path.resolve('/目录1/目录2', '/目录3/目录4/');
// 返回: '/目录3/目录4'

path.join([...paths])

path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符），然后规范化生成的路径。

path.join('/目录1', '目录2', '目录3/目录4', '目录5', '..');
// 返回: '/目录1/目录2/目录3/目录4'

path.resolve('/目录1/目录2', '/目录3/目录4/');
// 返回: '/目录1/目录2/目录3/目录4'

path.normalize(path)

path.normalize() 方法规范化给定的 path，解析 '..' 和 '.' 片段。

当找到多个连续的路径段分隔字符时（例如 POSIX 上的 /、Windows 上的 \ 或 /），则它们将被替换为单个平台特定的路径段分隔符（POSIX 上的 /、Windows 上的 \）。 尾部的分隔符会保留。

如果 path 是零长度的字符串，则返回 '.'，表示当前工作目录。

console.log(path.normalize('')); // .
console.log(path.normalize('/a//b////c///////d////')); //  /a/b/c/d/
console.log(path.normalize('/a/b/c/../../d')); //  /a/d

image.png

5.fs-extra

fs-extra -- 文件操作相关工具库
fs-extra模块是系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API

const fs = require('fs-extra');

fs.copy(src, dest, [option],callback)
复制文件或目录

• src 请注意，如果src是目录，它将复制此目录中的所有内容，而不是整个目录本身（请参阅问题＃537）。
• dest 请注意，如果src是文件，dest则不能是目录（请参阅问题＃323）。
• options