feat: add vue add command (#936)

* feat(bin): new 'add' command

* fix(add): Add a blank line

* Update installDeps.js

Author: Akryum

Diff for: packages/@vue/cli/bin/vue.js

@@ -54,6 +54,14 @@ program
     require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
   })
 
+program
+  .command('add <plugin> [pluginOptions]')
+  .allowUnknownOption()
+  .description('install a plugin and invoke its generator in an already created project')
+  .action((plugin) => {
+    require('../lib/add')(plugin, minimist(process.argv.slice(3)))
+  })
+
 program
   .command('inspect [paths...]')
   .option('--mode <mode>')

Diff for: packages/@vue/cli/lib/Creator.js

@@ -7,7 +7,7 @@ const Generator = require('./Generator')
 const cloneDeep = require('lodash.clonedeep')
 const sortObject = require('./util/sortObject')
 const getVersions = require('./util/getVersions')
-const installDeps = require('./util/installDeps')
+const { installDeps } = require('./util/installDeps')
 const clearConsole = require('./util/clearConsole')
 const PromptModuleAPI = require('./PromptModuleAPI')
 const writeFileTree = require('./util/writeFileTree')

Diff for: packages/@vue/cli/lib/add.js

@@ -0,0 +1,38 @@
+const chalk = require('chalk')
+const { loadOptions } = require('./options')
+const { installPackage } = require('./util/installDeps')
+const {
+  log,
+  error,
+  hasYarn,
+  stopSpinner
+} = require('@vue/cli-shared-utils')
+const invoke = require('./invoke')
+
+async function add (pluginName, options = {}, context = process.cwd()) {
+  const packageName = pluginName.includes('vue-cli-plugin-') ? pluginName : `vue-cli-plugin-${pluginName}`
+
+  log()
+  log(`📦  Installing ${chalk.cyan(packageName)}...`)
+  log()
+
+  const packageManager = loadOptions().packageManager || (hasYarn() ? 'yarn' : 'npm')
+  await installPackage(context, packageManager, null, packageName)
+
+  stopSpinner()
+
+  log()
+  log(`${chalk.green('✔')}  Successfully installed plugin: ${chalk.cyan(packageName)}`)
+  log()
+
+  invoke(pluginName, options, context)
+}
+
+module.exports = (...args) => {
+  return add(...args).catch(err => {
+    error(err)
+    if (!process.env.VUE_CLI_TEST) {
+      process.exit(1)
+    }
+  })
+}

Diff for: packages/@vue/cli/lib/invoke.js

@@ -6,7 +6,7 @@ const resolve = require('resolve')
 const inquirer = require('inquirer')
 const Generator = require('./Generator')
 const { loadOptions } = require('./options')
-const installDeps = require('./util/installDeps')
+const { installDeps } = require('./util/installDeps')
 const {
   log,
   error,

Diff for: packages/@vue/cli/lib/util/installDeps.js

@@ -93,16 +93,7 @@ function renderProgressBar (curr, total) {
   process.stderr.write(`[${complete}${incomplete}]${bar}`)
 }
 
-module.exports = async function installDeps (targetDir, command, cliRegistry) {
-  const args = []
-  if (command === 'npm') {
-    args.push('install', '--loglevel', 'error')
-  } else if (command === 'yarn') {
-    // do nothing
-  } else {
-    throw new Error(`Unknown package manager: ${command}`)
-  }
-
+async function addRegistryToArgs (command, args, cliRegistry) {
   if (command === 'yarn' && cliRegistry) {
     throw new Error(
       `Inline registry is not supported when using yarn. ` +
@@ -124,11 +115,10 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
       args.push(`--disturl=${taobaoDistURL}`)
     }
   }
+}
 
-  debug(`command: `, command)
-  debug(`args: `, args)
-
-  await new Promise((resolve, reject) => {
+function executeCommand (command, args, targetDir) {
+  return new Promise((resolve, reject) => {
     const child = execa(command, args, {
       cwd: targetDir,
       stdio: ['inherit', 'inherit', command === 'yarn' ? 'pipe' : 'inherit']
@@ -162,3 +152,43 @@ module.exports = async function installDeps (targetDir, command, cliRegistry) {
     })
   })
 }
+
+exports.installDeps = async function installDeps (targetDir, command, cliRegistry) {
+  const args = []
+  if (command === 'npm') {
+    args.push('install', '--loglevel', 'error')
+  } else if (command === 'yarn') {
+    // do nothing
+  } else {
+    throw new Error(`Unknown package manager: ${command}`)
+  }
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
+
+exports.installPackage = async function (targetDir, command, cliRegistry, packageName, dev = true) {
+  const args = []
+  if (command === 'npm') {
+    args.push('install', '--loglevel', 'error')
+  } else if (command === 'yarn') {
+    args.push('add')
+  } else {
+    throw new Error(`Unknown package manager: ${command}`)
+  }
+
+  if (dev) args.push('-D')
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  args.push(packageName)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}