chore: better upgrade messages

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

@@ -1,7 +1,29 @@
 const chalk = require('chalk')
+const execa = require('execa')
 const semver = require('semver')
 const getVersions = require('./getVersions')
-const { clearConsole } = require('@vue/cli-shared-utils')
+const { clearConsole, hasYarn, hasPnpm3OrLater } = require('@vue/cli-shared-utils')
+
+async function getInstallationCommand () {
+ if (hasYarn()) {
+ const { stdout: yarnGlobalDir } = await execa('yarn', ['global', 'dir'])
+ if (__dirname.includes(yarnGlobalDir)) {
+ return 'yarn global add'
+ }
+ }
+
+ if (hasPnpm3OrLater()) {
+ const { stdout: pnpmGlobalPrefix } = await execa('pnpm', ['config', 'get', 'prefix'])
+ if (__dirname.includes(pnpmGlobalPrefix) && __dirname.includes('pnpm-global')) {
+ return `pnpm i -g`
+ }
+ }
+
+ const { stdout: npmGlobalPrefix } = await execa('npm', ['config', 'get', 'prefix'])
+ if (__dirname.includes(npmGlobalPrefix)) {
+ return `npm i -g`
+ }
+}
 
 exports.generateTitle = async function (checkUpdate) {
  const { current, latest } = await getVersions()
@@ -16,12 +38,31 @@ exports.generateTitle = async function (checkUpdate) {
  }
  if (checkUpdate && semver.gt(latest, current)) {
  if (process.env.VUE_CLI_API_MODE) {
- title += chalk.green(` 🌟️ Update available: ${latest}`)
+ title += chalk.green(` 🌟️ New version available: ${latest}`)
  } else {
- title += chalk.green(`
-┌────────────────────${`─`.repeat(latest.length)}──┐
-│ Update available: ${latest} │
-└────────────────────${`─`.repeat(latest.length)}──┘`)
+ let upgradeMessage = `New version available ${chalk.magenta(current)} → ${chalk.green(latest)}`
+
+ try {
+ const command = await getInstallationCommand()
+ let name = require('../../package.json').name
+ if (semver.prerelease(latest)) {
+ name += '@next'
+ }
+
+ if (command) {
+ upgradeMessage +=
+ `\nRun ${chalk.yellow(`${command} ${name}`)} to update!`
+ }
+ } catch (e) {}
+
+ const upgradeBox = require('boxen')(upgradeMessage, {
+ align: 'center',
+ borderColor: 'green',
+ dimBorder: true,
+ padding: 1
+ })
+
+ title += `\n${upgradeBox}\n`
  }
  }
 

packages/@vue/cli/package.json

@@ -28,6 +28,7 @@
  "@vue/cli-ui": "^4.0.0-rc.7",
  "@vue/cli-ui-addon-webpack": "^4.0.0-rc.7",
  "@vue/cli-ui-addon-widgets": "^4.0.0-rc.7",
+ "boxen": "^4.1.0",
  "chalk": "^2.4.1",
  "cmd-shim": "^2.0.2",
  "commander": "^2.20.0",