fix: add a compatibility layer for router & vuex for CLI v3 (#4693)

fixes #4691

Author: haoqunjiang

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

@@ -1,3 +1,5 @@
+const { execa } = require('@vue/cli-shared-utils')
+
 module.exports = (api, options) => {
   api.render('./template', {
     doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
@@ -54,6 +56,43 @@ module.exports = (api, options) => {
     })
   }
 
+  // for v3 compatibility
+  if (options.router && !api.hasPlugin('router')) {
+    api.extendPackage({
+      devDependencies: {
+        '@vue/cli-plugin-router': '^4.0.0'
+      }
+    })
+
+    api.onCreateComplete(() => {
+      execa.sync('vue', [
+        'invoke',
+        '@vue/cli-plugin-router',
+        `--historyMode=${options.routerHistoryMode ? 'true' : ''}`
+      ], {
+        cwd: api.resolve('.')
+      })
+    })
+  }
+
+  // for v3 compatibility
+  if (options.vuex && !api.hasPlugin('vuex')) {
+    api.extendPackage({
+      devDependencies: {
+        '@vue/cli-plugin-vuex': '^4.0.0'
+      }
+    })
+
+    api.onCreateComplete(() => {
+      execa.sync('vue', [
+        'invoke',
+        '@vue/cli-plugin-vuex'
+      ], {
+        cwd: api.resolve('.')
+      })
+    })
+  }
+
   // additional tooling configurations
   if (options.configs) {
     api.extendPackage(options.configs)