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

close #1202, close #1204

Author: yyx990803

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 renamed to 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 renamed to 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 renamed to 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 renamed to 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