研究vue-cli脚手架实现过程-自己写一个demo

vue脚手架的使用过程如下：常用的命令 

 

1、安装vue脚手架vue-cli
　　命令：npm install -g vue-cli

　　安装成功后可以用 vue -V 查看vue版本
2、cd到对应的目录下初始化vue项目
　　命令：vue init webpack my-project
　　　　　　Project name 项目名 
　　　　　　Project description 项目名描述 
　　　　　　Author 作者邮箱 
　　　　　　Use ESLint to lint your code? 是否需要ESlist语法检查 
　　　　　　Setup unit tests with Karma + Mocha? 是否需要单元测试 
　　　　　　Setup e2e tests with Nightwatch? Yes是否需要e2e测试 
3、package.json为项目依赖资源，如果要运行这个项目需要使用cnpm install 安装依赖项（直接在项目文件夹路径下执行）
4、使用命令cnpm run dev启动项目，浏览器会打开 http://localhost:8080/#/ 看到效果

 在node终端为啥输入了vue init webpack my-project 和vue -V能出来模板和对应的版本号呢？

 实际上是通过把node终端命令和脚本之间创建一个映射关系：之后操作vue的相关命令就是执行node的相关命令了

 来看一个例子吧：

执行自定义执行之后执行对用的脚本的一个操作过程：

新建文件夹：demoCli 在里面新建文件index.js内容如下：注意：使用node开发命令行工具所执行的js脚本必须在顶部加入 #!/usr/bin/env node 声明 

#!/usr/bin/env node
//使用node开发命令行工具所执行的js脚本必须在顶部加入 #!/usr/bin/env node 声明 
console.log('demo index.js执行了')

 之后执行：

npm init -y

 在当前文件夹下初始化项目生成package.json文件

{
  "name": "democli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bin": {
    "itRun": "index.js"
  }
}

 "bin": {
    "itRun": "index.js"
  }

这个是在后面新加的内容，意思是itRun指令对应 的是执行index.js文件操作 

 

接下来一个完整的例子：

package.json文件：

{
  "name": "democli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bin": {
    "itRun": "index.js"
  },
  "dependencies": {
    "chalk": "^5.0.0",
    "commander": "^9.0.0",
    "download-git-repo": "^3.0.2",
    "handlebars": "^4.7.7",
    "inquirer": "^8.2.0",
    "log-symbols": "^5.1.0",
    "ora": "^6.0.1"
  },
  "type": "module"
}

index.js文件：

#!/usr/bin/env node
//使用node开发命令行工具所执行的js脚本必须在顶部加入 #!/usr/bin/env node 声明
import {program} from "commander";//. 使用包 Commander.js 模块来获取处理命令行参数
import download from "download-git-repo";//使用 download-git-repo 下载 能够直接下载仓库内容的插件
import inquirer from "inquirer";//够与用户在命令行进行参数选择交互
import handlebars from "handlebars";//能够读取当前项目下的文件，并重新写入
import ora from "ora";//使用 ora 增加下载中 loading 效果
import fs from "fs";
import chalk from "chalk";//字体美化 chalk chalk 能够自定义使输出的命令行字体颜色
import logSymbols from "log-symbols";//日志符号 logSymbols logSymbols 能够在控制台输出指定的日志符号
console.log('demo index.js执行了')
//原生获取命令行参数的方法
// console.log(process.argv);
/* 
输入：itRun pro 
结果： 
[
  'C:\\Program Files\\nodejs\\node.exe',
  'C:\\Users\\dongxu.yang\\AppData\\Roaming\\npm\\node_modules\\democli\\index.js',
  'pro'
]
*/
const template = {
  "tpl-a": {
    "url": "https://github.com:15011164760/tpl-a#main",
    "description": "uni-shop_demo"
  },
  "tpl-b": {
    // 下载目标，格式为：仓库地址:用户名/仓库名字#分支
    "url": "https://github.com:15011164760/tpl-b#main",
    "description": "tpl-b==="
  },
  "tpl-c": {
    "url": "https://github.com:15011164760/tpl-c#main",
    "description": "sunhuapeng_2.0"
  },
}
program.version('0.1.0')
program
  .command('init <template> <project>')
  .description('初始化项目模板')
  .action((templateName, projectName) => {
    console.log(templateName, projectName);
    let { url } = template[templateName];
    console.log(url);
    // 初始化 ora
    const loading = ora("模板下载中...");
    loading.start();
    download(url, projectName, {
      // 以克隆形式下载
      clone: true,
      // 完成回调
    }, (err) => {
      if (err) {
        loading.fail();
        console.log('下载失败', err)
        // 输出红色警告字体告知用户模板下载失败
        console.log(logSymbols.error, chalk.red("模板下载失败!"));
        console.log("错误原因：", err);
      } else {
        loading.succeed("下载成功！");
        console.log('下载成功')
        // 以橙色字体提示用户模板已经下载完成
        const log = chalk.hex("#FFA500");
        // // 模板初始化成功后输出
        console.log(logSymbols.success, log("模板初始化成功！"))
        inquirer.prompt([
          {
            // 输入类型
            type: "input",
            // 字段名称
            name: "name",
            // 提示信息
            message: "请输入项目名称",
          },
          {
            // 输入类型
            type: "input",
            name: "description",
            message: "请输入项目简介",
          },
          {
            type: "input",
            name: "author",
            message: "请输入作者名称",
          },
        ])
          // 获取输入结果
          .then((answers) => {
            console.log(answers);
            // 把采集到的用户数据解析替换到 package.json 文件中
            // 保存下载下来的模板 package.json 配置文件路径
            const packagePath = `${projectName}/package.json`;
            // 使用 fs 获取下载到的模板中额 package.json 配置文件
            const packageContent = fs.readFileSync(
              `${projectName}/package.json`,
              "utf8"
            );
            // 使用 handlebars 编译这个文件为渲染函数
            const packageResult = handlebars.compile(packageContent)(answers);
            // 将修改后配置写入下载下来的模板中
            fs.writeFileSync(packagePath, packageResult);
            console.log("初始化模板成功！");
            console.log(packageResult);
          });
      }
    })
    // 使用 download-git-repo 下载模板
    /* 
    
    */
  })
program
  .command('list')
  .description('查看所用可用模板')
  .action((templateName, projectName) => {
    for (let key in template)
      console.log(`${key} ${template[key].description}`);
  }
  )
program.parse(process.argv);

在命令行输入：

itRun init tpl-c  tpl-c

就是下载模板了 

文章参考这个 更细节的看这个吧：揭秘 Vue Cli，打造属于自己的项目脚手架工具 · 语雀