feat: add vue version choice to creator prompt

Author: haoqunjiang

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

@@ -51,7 +51,8 @@ module.exports = class Creator extends EventEmitter {
 
     this.name = name
     this.context = process.env.VUE_CLI_CONTEXT = context
-    const { presetPrompt, featurePrompt } = this.resolveIntroPrompts()
+    const { vueVersionPrompt, presetPrompt, featurePrompt } = this.resolveIntroPrompts()
+    this.vueVersionPrompt = vueVersionPrompt
     this.presetPrompt = presetPrompt
     this.featurePrompt = featurePrompt
     this.outroPrompts = this.resolveOutroPrompts()
@@ -307,6 +308,8 @@ module.exports = class Creator extends EventEmitter {
       this.promptCompleteCbs.forEach(cb => cb(answers, preset))
     }
 
+    preset.vueVersion = answers.vueVersion
+
     // validate
     validatePreset(preset)
 
@@ -398,10 +401,11 @@ module.exports = class Creator extends EventEmitter {
 
   resolveIntroPrompts () {
     const presets = this.getPresets()
-    const presetChoices = Object.keys(presets).map(name => {
+    const presetChoices = Object.entries(presets).map(([name, preset]) => {
       return {
-        name: `${name} (${formatFeatures(presets[name])})`,
-        value: name
+        name: `${name} (${formatFeatures(name, preset)})`,
+        value: name,
+        when: (answers) => !preset.vueVersion || preset.vueVersion === answers.vueVersion
       }
     })
     const presetPrompt = {
@@ -416,6 +420,22 @@ module.exports = class Creator extends EventEmitter {
         }
       ]
     }
+    const vueVersionPrompt = {
+      when: answers => answers.preset === 'default',
+      name: 'vueVersion',
+      type: 'list',
+      message: `Choose a version of Vue.js that you want to start the project with`,
+      choices: [
+        {
+          name: '2.x',
+          value: '2'
+        },
+        {
+          name: '3.x (preview)',
+          value: '3'
+        }
+      ]
+    }
     const featurePrompt = {
       name: 'features',
       when: isManualMode,
@@ -425,6 +445,7 @@ module.exports = class Creator extends EventEmitter {
       pageSize: 10
     }
     return {
+      vueVersionPrompt,
       presetPrompt,
       featurePrompt
     }
@@ -511,6 +532,7 @@ module.exports = class Creator extends EventEmitter {
     })
     const prompts = [
       this.presetPrompt,
+      this.vueVersionPrompt,
       this.featurePrompt,
       ...this.injectedPrompts,
       ...this.outroPrompts

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

@@ -8,6 +8,7 @@ const { createSchema, validate } = require('@vue/cli-shared-utils/lib/validate')
 const rcPath = exports.rcPath = getRcPath('.vuerc')
 
 const presetSchema = createSchema(joi => joi.object().keys({
+  vueVersion: joi.string().only(['2', '3']),
   bare: joi.boolean(),
   useConfigFiles: joi.boolean(),
   // TODO: Use warn for router and vuex once @hapi/joi v16 releases

packages/@vue/cli/lib/promptModules/vueVersion.js

@@ -1,8 +1,9 @@
 module.exports = cli => {
-  cli.injectPrompt({
-    name: 'vueVersion',
+  cli.injectFeature({
+    name: 'Choose Vue version',
+    value: 'vueVersion',
+    description: 'Choose a version of Vue.js that you want to start the project with',
     type: 'list',
-    message: `Choose a version of Vue.js that you want to start the project with`,
     choices: [
       {
         name: '2.x',
@@ -12,7 +13,8 @@ module.exports = cli => {
         name: '3.x (preview)',
         value: '3'
       }
-    ]
+    ],
+    checked: true
   })
 
   cli.onPromptComplete((answers, options) => {

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

@@ -18,10 +18,17 @@ exports.getFeatures = (preset) => {
   return features
 }
 
-exports.formatFeatures = (preset, lead, joiner) => {
+exports.formatFeatures = (name, preset) => {
+  let versionInfo = ''
+  if (preset.vueVersion) {
+    versionInfo = chalk.yellow(`[Vue ${preset.vueVersion}] `)
+  } else if (name !== 'default') {  // default preset is Vue version-agnositic
+    versionInfo = chalk.yellow('[Vue 2] ')
+  }
+
   const features = exports.getFeatures(preset)
-  return features.map(dep => {
+  return versionInfo + features.map(dep => {
     dep = toShortPluginId(dep)
-    return `${lead || ''}${chalk.yellow(dep)}`
-  }).join(joiner || ', ')
+    return chalk.yellow(dep)
+  }).join(', ')
 }