深刻认识vue-cli：能作的不单单是初始化vue工程

相信对于大部分使用过VueJS的同窗来讲，vue-cli是他们很是熟悉的一个工具。借助vue-cli，咱们经过很是简单的问答形式，方便地初始化一个vue工程，彻底不须要担忧繁复的webpack、eslint配置等等。

可是，仍然有许多同窗没有搞清楚vue-cli和vue工程之间的关系，致使没有充分发挥vue-cli的功能。在这篇文章中，我将从底层原理开始并结合几个例子，告诉你们vue-cli还能这样用。

什么是vue-cli

引用vue-cli官方文档的一句话：

A simple CLI for scaffolding Vue.js projects.
一个简单的Vue.js工程命令行脚手架工具。

在全局安装vue-cli以后，就能够经过一条命令初始化咱们的vue工程：

vue init <template-name> <project-name>

接下来vue-cli就会按照这个<template-name>模板内部的设置，抛出几个问答选项。在回答完问答选项之后，咱们的vue工程目录就已经生成好了，接下来只要把依赖安装完，直接就能够跑起来，是否是很是方便呢？

接下来，咱们就要看看，这一条命令的背后，究竟发生了一些什么事。

vue-cli初始化项目的原理

从官方文档能够知道，vue-cli使用了download-git-repo这个工具去下载远端git仓库里面的工程，若是加上了--clone参数，则会在内部运行git clone，经过克隆的方式把远端git仓库拉取到本地。明白这一点相当重要：

vue-cli并不是从无到有地凭空生成一个项目，而是经过下载/拉取已有的工程到本地，完成生成项目的工做。

而这个“已有的工程”，就是所谓的“模板（template）”。

固然，vue-cli可不仅是把模板拉取到本地这么简单，它还容许咱们经过问答的形式对模板进行个性化配置，这个又是如何作到的呢？

vue-cli使用了inquirer.js实现了“问答环节”，简单来讲是这样子的：

// 准备几个问题

const questions = [
  {
    type: 'input',
    name: 'name',
    message: 'What's your name?'
  },
  {
    type: 'input',
    name: 'age',
    message: 'How old are you?',
  }
]

而后把这段问题传给inquirer.js就能够了：

inquirer.prompt(questions).then(({ name, age }) => {
  console.log(`My name is ${name}, and I'm ${age} years old`)
})

在运行的时候，vue-cli会在命令行里面把What's your name?和How old are you?这两个问题相继抛出，获取用户输入，把输入赋值给name和age变量，这样就可以获取用户的输入信息了。接着咱们引出下一个问题，这些用户输入，是如何跟模板的自定义关联起来的呢？

咱们打开一个vue-cli的模板，好比webpack-simple里面的README.md，它长这样：

# {{ name }}

> {{ description }}

上面使用双括号包裹起来的，最终会根据用户的输入而更改成具体的内容。是否是以为这种写法很熟悉？其实就是Handlebars的模板语法。

以这个README.md文件为例，在vue-cli运行的过程当中，会首先读取文件的内容放在内存，而后经过inquirer.js获取用户输入，把输入的值替换到文件内容里面，最后经过另一个名叫Metalsmith的工具，把替换好的内容输出为文件，也就生成了具备个性化内容的README.md文件了。

整个流程并不复杂，在明白这些原理后，咱们就能更深刻地使用vue-cli了。

Javascript与Java，Vue-cli与Vue

虽然这么类比不太准确，但我想你们也应该能明白个人意思。

简单来讲，就是vue-cli不只仅能初始化vue工程，理论上可以初始化一切工程，包括react，angular等等等等，只要你有一份可以运行的模板，就可以经过vue-cli进行工程的初始化。

在讨论区有许多相似的问题：

• “vue-cli当中如何配置sass？”
• “vue-cli中如何修改devServer的端口？”
• “vue-cli中发现项目跑不起来”
• ……

vue-cli说：“这锅我不背。”

是的，所遇到的问题都不是vue-cli的问题，而是相关模板的问题。那么应该如何写一份合格的模板呢？下面咱们一块儿来研究一下。

写一份vue-cli模板

参考官方文档，也许仍是不能理解到底应该怎么写，那么咱们能够直接参考官方例子webpack-simple，看看它究竟是怎么写的。

首先能够看到目录结构：

着实是很是简单，其中meta.json就是向用户抛出的问答题，/template目录则是真正的模板内容。首先咱们来看看meta.json都写了些啥：

{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "label": "Project name"
    },
    "description": {
      "type": "string",
      "required": true,
      "label": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "label": "Author"
    },
    "sass": {
       "type": "confirm",
       "message": "Use sass?",
       "default": false
    }
  },
  "completeMessage": "{{#inPlace}}To get started:\n\n  npm install\n  npm run dev.{{else}}To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev.{{/inPlace}}"
}

能够看到，它一共向用户提了4个问题：

• Project name
• Project description
• Author
• Use sass?

接着，咱们打开/template目录，看看它长什么样：

这就是终将被生成的工程目录。打开里面的package.json：

{
  "name": "{{ name }}",
  "description": "{{ description }}",
  "version": "1.0.0",
  "author": "{{ author }}",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    {{#sass}}
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    {{/sass}}
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

结合前文原理里面的内容，也不难理解这个package.json里面双括号的含义了。

看到这里，是否是已经跃跃欲试，想要写一份属于本身的模板呢？又或者想要打造一款属于本身的命令行脚手架工具？原理都是很简单的，只要按照想法一步步实现便可。

后记

其实在去年早些时候，已经写了两篇脚手架相关的文章：

• 《教你从零开始搭建一款前端脚手架工具》
• 好用的项目初始化工具SCION升级啦！

可是发现仍然有许多同窗对于vue-cli的理解有些误差，因而写下这篇文章，聊一聊本身的理解。

By the way，我将会在11月16日晚上8点，在Segmentfault开展live讲座，主题是《【前端工程化】：玩转Webpack配置》，欢迎感兴趣的同窗报名参加哦，保证精心准备，干货满满！

报名连接：https://segmentfault.com/l/15...

期待和你们的分享交流~