refactor: further tweak install output

Author: yyx990803

packages/@vue/cli/lib/Creator.js

@@ -122,6 +122,7 @@ module.exports = class Creator {
     // install plugins
     stopSpinner()
     log(`⚙  Installing CLI plugins. This might take a while...`)
+    log()
     if (isTestOrDebug) {
       // in development, avoid installation process
       await setupDevProject(context)
@@ -130,6 +131,7 @@ module.exports = class Creator {
     }
 
     // run generator
+    log()
     log(`🚀  Invoking generators...`)
     const plugins = this.resolvePlugins(options.plugins)
     const generator = new Generator(
@@ -142,11 +144,13 @@ module.exports = class Creator {
 
     // install additional deps (injected by generators)
     log(`📦  Installing additional dependencies...`)
+    log()
     if (!isTestOrDebug) {
       await installDeps(context, packageManager, cliOptions.registry)
     }
 
     // run complete cbs if any (injected by generators)
+    log()
     logWithSpinner('⚓', `Running completion hooks...`)
     for (const cb of createCompleteCbs) {
       await cb()

packages/@vue/cli/lib/util/installDeps.js

@@ -2,6 +2,7 @@ const { URL } = require('url')
 const https = require('https')
 const chalk = require('chalk')
 const execa = require('execa')
+const readline = require('readline')
 const inquirer = require('inquirer')
 const { loadOptions, saveOptions } = require('../options')
 const { pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils')
@@ -74,6 +75,26 @@ const shouldUseTaobao = async (command) => {
   return save(useTaobaoRegistry)
 }
 
+const toStartOfLine = stream => {
+  if (!chalk.supportsColor) {
+    stream.write('\r')
+    return
+  }
+  readline.cursorTo(stream, 0)
+}
+
+const renderProgressBar = (curr, total) => {
+  const ratio = Math.min(Math.max(curr / total, 0), 1)
+  const bar = ` ${curr}/${total}`
+  const availableSpace = Math.max(0, process.stderr.columns - bar.length - 3)
+  const width = Math.min(total, availableSpace)
+  const completeLength = Math.round(width * ratio)
+  const complete = `#`.repeat(completeLength)
+  const incomplete = `-`.repeat(width - completeLength)
+  toStartOfLine(process.stderr)
+  process.stderr.write(`[${complete}${incomplete}]${bar}`)
+}
+
 module.exports = async function installDeps (targetDir, command, cliRegistry) {
   const args = []
   if (command === 'npm') {
@@ -105,9 +126,28 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
   await new Promise((resolve, reject) => {
     const child = execa(command, args, {
       cwd: targetDir,
-      stdio: 'inherit'
+      stdio: ['inherit', 'inherit', command === 'yarn' ? 'pipe' : 'inherit']
     })
 
+    // filter out unwanted yarn output
+    if (command === 'yarn') {
+      child.stderr.on('data', buf => {
+        const str = buf.toString()
+        if (/warning/.test(str)) {
+          return
+        }
+        // progress bar
+        const progressBarMatch = str.match(/\[.*\] (\d+)\/(\d+)/)
+        if (progressBarMatch) {
+          // since yarn is in a child process, it's unable to get the width of
+          // the terminal. reimplement the progress bar ourselves!
+          renderProgressBar(progressBarMatch[1], progressBarMatch[2])
+          return
+        }
+        process.stderr.write(buf)
+      })
+    }
+
     child.on('close', code => {
       if (code !== 0) {
         reject(`command failed: ${command} ${args.join(' ')}`)