仿vue-cli3写一个自己的vue-cli脚手架

本文介绍如何仿照vue-cli3构建一个自己的前端脚手架,通过解析命令行参数,选择项目模板,下载并自定义配置,提高开发效率。涉及内容包括CLI运行原理、依赖模块创建、脚手架代码逻辑实现,以及本地调试和命令效果展示。
摘要由CSDN通过智能技术生成

        目前在市面上存在很多脚手架,如:create-react-app、vue-cli。我们可以通过一行简单的命令,就能创建一个基本的项目工程,大大的提高了开发效率。但是我们会面临一个问题,除了脚手架帮我们创建好的项目框架,我们的项目总有需要定制化的配置,比如我们需要引入我们想要的elementUI框架,引入axios相关的工具类完成http请求等。我们不可能每次开启新项目都再配置一遍吧,这太劳神费力了。

      通常我们会搞一个个性化脚手架cli,平时创建项目时通过该脚手架一键生成,并同时完成所有需要的配置,以快速开发。接下来,我们看看怎么搞?   

1.CLI 的运行原理

  • 创建动态链接库,暴露全局 cli 命令

    如果要暴露一个全局的命令,首先需要在 package.json 文件中编写一个 bin 命令,当前示例指向bin目录下的mycli.js文件。

     "bin": "bin/mycli.js"
  • 读取并解析命令行参数

    读取命令行参数其实非常简单,使用 program.argv 获取

  • 提供用户可选的配置项

    根据用户的选择,创建不同类型的项目模板,比如是否要typescript支持

  • 拷贝自定义模板到本地

    一般我们会事先准备好一个项目模板,供cli下载

2.创建cli所需要的部分依赖模块

  • commander实现控制台命令行问

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值