feat: allow router/vuex to be late added via vue add

close #1202, close #1204

packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue

@@ -1,5 +1,5 @@
 ---
-extend: '@vue/cli-service/generator/template/src/views/Home.vue'
+extend: '@vue/cli-service/generator/router/template/src/views/Home.vue'
 replace:
  - !!js/regexp /Welcome to Your Vue\.js App/
  - !!js/regexp /<script>[^]*?<\/script>/

packages/@vue/cli-service/generator/index.js

@@ -31,23 +31,11 @@ module.exports = (api, options) => {
  })
 
  if (options.router) {
- api.injectImports(`src/main.js`, `import router from './router'`)
- api.injectRootOptions(`src/main.js`, `router`)
- api.extendPackage({
- dependencies: {
- 'vue-router': '^3.0.1'
- }
- })
+ require('./router')(api, options)
  }
 
  if (options.vuex) {
- api.injectImports(`import store from './store'`)
- api.injectRootOptions(`store`)
- api.extendPackage({
- dependencies: {
- vuex: '^3.0.1'
- }
- })
+ require('./vuex')(api, options)
  }
 
  if (options.cssPreprocessor) {

packages/@vue/cli-service/generator/router/index.js

@@ -0,0 +1,30 @@
+module.exports = (api, options) => {
+ api.injectImports(`src/main.js`, `import router from './router'`)
+ api.injectRootOptions(`src/main.js`, `router`)
+ api.extendPackage({
+ dependencies: {
+ 'vue-router': '^3.0.1'
+ }
+ })
+ api.render('./template')
+
+ if (options.invoking) {
+ api.postProcessFiles(files => {
+ const appFile = files[`src/App.vue`]
+ if (appFile) {
+ files[`src/App.vue`] = appFile.replace(/^<template>[^]+<\/script>/, `
+<template>
+ <div id="app">
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+ </div>
+</template>
+ `.trim())
+ console.log(files[`src/App.vue`])
+ }
+ })
+ }
+}

packages/@vue/cli-service/generator/template/src/router.js → packages/@vue/cli-service/generator/router/template/src/router.js

@@ -1,4 +1,3 @@
-<%_ if (rootOptions.router) { _%>
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from './views/Home.vue'
@@ -20,4 +19,3 @@ export default new Router({
  }
  ]
 })
-<%_ } _%>

packages/@vue/cli-service/generator/template/src/views/About.vue → packages/@vue/cli-service/generator/router/template/src/views/About.vue

@@ -1,7 +1,5 @@
-<%_ if (rootOptions.router) { _%>
 <template>
  <div class="about">
  <h1>This is an about page</h1>
  </div>
 </template>
-<%_ } _%>

packages/@vue/cli-service/generator/template/src/views/Home.vue → packages/@vue/cli-service/generator/router/template/src/views/Home.vue

@@ -1,4 +1,3 @@
-<%_ if (rootOptions.router) { _%>
 <template>
  <div class="home">
  <img src="../assets/logo.png">
@@ -17,4 +16,3 @@ export default {
  }
 }
 </script>
-<%_ } _%>

packages/@vue/cli-service/generator/vuex/index.js

@@ -0,0 +1,10 @@
+module.exports = (api, options) => {
+ api.injectImports(`src/main.js`, `import store from './store'`)
+ api.injectRootOptions(`src/main.js`, `store`)
+ api.extendPackage({
+ dependencies: {
+ vuex: '^3.0.1'
+ }
+ })
+ api.render('./template')
+}

packages/@vue/cli-service/generator/template/src/store.js → packages/@vue/cli-service/generator/vuex/template/src/store.js

@@ -1,4 +1,3 @@
-<%_ if (rootOptions.vuex) { _%>
 import Vue from 'vue'
 import Vuex from 'vuex'
 
@@ -15,4 +14,3 @@ export default new Vuex.Store({
 
  }
 })
-<%_ } _%>

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

@@ -12,6 +12,14 @@ const {
 } = require('@vue/cli-shared-utils')
 
 async function add (pluginName, options = {}, context = process.cwd()) {
+ // special internal "plugins"
+ if (/^(@vue\/)?router$/.test(pluginName)) {
+ return addRouter(context)
+ }
+ if (/^(@vue\/)?vuex$/.test(pluginName)) {
+ return addVuex(context)
+ }
+
  const packageName = resolvePluginId(pluginName)
 
  log()
@@ -35,6 +43,22 @@ async function add (pluginName, options = {}, context = process.cwd()) {
  }
 }
 
+async function addRouter (context) {
+ invoke.runGenerator(context, {
+ id: 'core:router',
+ apply: require('@vue/cli-service/generator/router'),
+ options: { invoking: true }
+ })
+}
+
+async function addVuex (context) {
+ invoke.runGenerator(context, {
+ id: 'core:vuex',
+ apply: require('@vue/cli-service/generator/vuex'),
+ options: { invoking: true }
+ })
+}
+
 module.exports = (...args) => {
  return add(...args).catch(err => {
  error(err)

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

@@ -36,16 +36,17 @@ async function readFiles (context) {
  return res
 }
 
-async function invoke (pluginName, options = {}, context = process.cwd()) {
- delete options._
+function getPkg (context) {
  const pkgPath = path.resolve(context, 'package.json')
- const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
-
  if (!fs.existsSync(pkgPath)) {
  throw new Error(`package.json not found in ${chalk.yellow(context)}`)
  }
+ return require(pkgPath)
+}
 
- const pkg = require(pkgPath)
+async function invoke (pluginName, options = {}, context = process.cwd()) {
+ delete options._
+ const pkg = getPkg(context)
 
  // attempt to locate the plugin in package.json
  const findPlugin = deps => {
@@ -89,6 +90,11 @@ async function invoke (pluginName, options = {}, context = process.cwd()) {
  options
  }
 
+ await runGenerator(context, plugin, pkg)
+}
+
+async function runGenerator (context, plugin, pkg = getPkg(context)) {
+ const isTestOrDebug = process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG
  const createCompleteCbs = []
  const generator = new Generator(context, {
  pkg,
@@ -98,7 +104,7 @@ async function invoke (pluginName, options = {}, context = process.cwd()) {
  })
 
  log()
- logWithSpinner('🚀', `Invoking generator for ${id}...`)
+ logWithSpinner('🚀', `Invoking generator for ${plugin.id}...`)
  await generator.generate({
  extractConfigFiles: true,
  checkExisting: true
@@ -127,7 +133,7 @@ async function invoke (pluginName, options = {}, context = process.cwd()) {
  stopSpinner()
 
  log()
- log(` Successfully invoked generator for plugin: ${chalk.cyan(id)}`)
+ log(` Successfully invoked generator for plugin: ${chalk.cyan(plugin.id)}`)
  if (!process.env.VUE_CLI_TEST && hasGit()) {
  const { stdout } = await execa('git', [
  'ls-files',
@@ -166,3 +172,5 @@ module.exports = (...args) => {
  }
  })
 }
+
+module.exports.runGenerator = runGenerator