vue cli脚手架详解_CLI脚手架工作原理

前言

什么是脚手架？

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。——百度百科

下面看一段vue-cli的官方解释：

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

简单来说，脚手架就是「为了减少重复性工作而做的工具」

通常我们使用vue-cli创建项目会如下图所示，用交互的方式，选择用户需要的功能，最后创建一个项目，那么它内部是怎么实现的呢？今天我们这篇文章就简单介绍一下vue-cli工具的核心原理，以及实现一个简单的cli工具。

基本组成

通常来说，cli工具都必须用到下面的一些插件。

• commander

  • 作用：解析参数

• inquirer

  • 作用：交互式命令作用

• download-git-report

  • 作用：在官网上下载模板

• chalk

  • 作用：在命令行增加色彩

• metalsmith

  • 作用：读取文件，实现模板渲染

• consoledate

  • 作用：统一的模板引擎(比如：对ejs的解析)

核心代码的实现

下面，会通过代码的形式，一步一步的来做一个简单的CLI的项目。

首先，我新建了一个项目，并且进行npm init的初始化工作。

新建一个bin的目录，然后在该目录下新建www的文件。

在package.json中，把bin指向bin目录下的www.js文件。

如下图

bin/www.js 的文件内容

#! /usr/bin/env node

console.log('111')