finalize cli output

Author: yyx990803

packages/@vue/cli-service/generator/files/src/main.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'
 
+Vue.config.productionTip = false
+
 new Vue({
   el: '#app',
   render: h => h(App)

packages/@vue/cli-service/lib/command-plugins/help.js

@@ -1,5 +1,6 @@
 const chalk = require('chalk')
 const padEnd = require('string.prototype.padend')
+const getPadLength = require('../util/getPadLength')
 
 module.exports = (api, options) => {
   api.registerCommand('help', args => {
@@ -17,7 +18,7 @@ module.exports = (api, options) => {
       `\n  Commands:\n`
     )
     const commands = api.service.commands
-    const padLength = getLongest(commands)
+    const padLength = getPadLength(commands)
     for (const name in commands) {
       if (name !== 'help') {
         const opts = commands[name].opts || {}
@@ -43,7 +44,7 @@ module.exports = (api, options) => {
       }
       if (opts.options) {
         console.log(`\n  Options:\n`)
-        const padLength = getLongest(opts.options)
+        const padLength = getPadLength(opts.options)
         for (const name in opts.options) {
           console.log(`    ${
             chalk.blue(padEnd(name, padLength))
@@ -56,13 +57,3 @@ module.exports = (api, options) => {
     }
   }
 }
-
-function getLongest (commands) {
-  let longest = 10
-  for (const name in commands) {
-    if (name.length + 1 > longest) {
-      longest = name.length + 1
-    }
-  }
-  return longest
-}

packages/@vue/cli-service/lib/command-plugins/serve.js

@@ -1,4 +1,4 @@
-const { info, error } = require('@vue/cli-shared-utils')
+const { info, error, hasYarn } = require('@vue/cli-shared-utils')
 
 module.exports = (api, options) => {
   api.registerCommand('serve', {
@@ -73,9 +73,10 @@ module.exports = (api, options) => {
 
         if (isFirstCompile) {
           isFirstCompile = false
+          const buildCommand = hasYarn ? `yarn build` : `npm run build`
           console.log([
             `  Note that the development build is not optimized.`,
-            `  To create a production build, run ${chalk.cyan(`npm run build`)} or ${chalk.cyan(`yarn build`)}.`
+            `  To create a production build, run ${chalk.cyan(buildCommand)}.`
           ].join('\n'))
           console.log()
 

packages/@vue/cli-service/lib/util/getPadLength.js

@@ -0,0 +1,9 @@
+module.exports = function getPadLength (obj) {
+  let longest = 10
+  for (const name in obj) {
+    if (name.length + 1 > longest) {
+      longest = name.length + 1
+    }
+  }
+  return longest
+}

packages/@vue/cli-shared-utils/index.js

@@ -28,11 +28,18 @@ exports.error = (msg) => {
   }
 }
 
+const cliVersion = require('@vue/cli/package.json').version
 exports.clearConsole = function () {
   if (process.stdout.isTTY) {
     process.stdout.write(
       process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'
     )
+    let title = chalk.bold.green(`Vue CLI v${cliVersion}`)
+    if (process.env.VUE_CLI_DEBUG) {
+      title += ' ' + chalk.bgRed(' DEBUG MODE ')
+    }
+    console.log(title)
+    console.log()
   }
 }
 

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

@@ -76,7 +76,8 @@ module.exports = class Creator {
     debug('options')(options)
 
     // write base package.json to disk
-    logWithSpinner(emoji.get('sparkles'), `Creating project in ${chalk.green(targetDir)}.`)
+    clearConsole()
+    logWithSpinner(emoji.get('sparkles'), `Creating project in ${chalk.yellow(targetDir)}.`)
     writeFileTree(targetDir, {
       'package.json': JSON.stringify({
         name,
@@ -105,7 +106,14 @@ module.exports = class Creator {
     logWithSpinner(emoji.get('package'), `Installing additional dependencies...`)
     await installDeps(options.packageManager, targetDir)
     stopSpinner()
-    console.log(`${chalk.green('✔')}  Successfully created project ${chalk.green(name)}.`)
+    console.log(`${chalk.green('✔')}  Successfully created project ${chalk.yellow(name)}.`)
+    console.log()
+    console.log(
+      `${emoji.get('point_right')}  Get started with the following commands:\n\n` +
+      chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`) +
+      chalk.cyan(` ${chalk.gray('$')} ${options.packageManager === 'yarn' ? 'yarn dev' : 'npm run dev'}`)
+    )
+    console.log()
   }
 
   resolveIntroPrompts () {