feat!: make Vue 3 the default version for vue create (#6917)

Author: haoqunjiang

packages/@vue/cli-ui/tests/e2e/specs/g1-projects.js

@@ -38,10 +38,19 @@ describe('Vue project manager', () => {
       cy.get('[data-testid="use-config-files"] .bullet').click()
       cy.get('.next').click()
     })
+
+    // choose vue 2
+    cy.get('.config').within(() => {
+      cy.get('.vue-ui-select').eq(0).click()
+    })
+    cy.get('.vue-ui-select-button').eq(1).click()
+
+    // choose standard eslint config
     cy.get('.config').within(() => {
       cy.get('.vue-ui-select').eq(1).click()
     })
     cy.get('.vue-ui-select-button').eq(2).click()
+
     cy.get('.config').within(() => {
       cy.get('.vue-ui-switch').click({ multiple: true })
       cy.get('.next').click()

packages/@vue/cli/__tests__/Creator.spec.js

@@ -9,8 +9,9 @@ test('default', async () => {
     {
       message: 'pick a preset',
       choices: [
+        // both names are `Default`, the vue version is indicated in the feature prompts, so later we'll test the result preset for the vue version
+        'Default',
         'Default',
-        'Default (Vue 3)',
         'Manually select'
       ],
       choose: 0
@@ -21,7 +22,7 @@ test('default', async () => {
       choose: 0
     }
   ]
-  await assertPromptModule([], expectedPrompts, defaults.presets.default)
+  await assertPromptModule([], expectedPrompts, defaults.presets['Default (Vue 3)'])
 })
 
 test('manual + PromptModuleAPI', async () => {
@@ -107,7 +108,7 @@ test('manual + PromptModuleAPI', async () => {
       choices: [
         'test',
         'Default',
-        'Default (Vue 3)',
+        'Default',
         'Manually'
       ],
       choose: 0

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

@@ -77,7 +77,7 @@ module.exports = class Creator extends EventEmitter {
         preset = await this.resolvePreset(cliOptions.preset, cliOptions.clone)
       } else if (cliOptions.default) {
         // vue create foo --default
-        preset = defaults.presets.default
+        preset = defaults.presets['Default (Vue 3)']
       } else if (cliOptions.inlinePreset) {
         // vue create foo --inlinePreset {...}
         try {
@@ -329,6 +329,8 @@ module.exports = class Creator extends EventEmitter {
 
     if (name in savedPresets) {
       preset = savedPresets[name]
+    } else if (name === 'default') {
+      preset = savedPresets['Default (Vue 3)']
     } else if (name.endsWith('.json') || /^\./.test(name) || path.isAbsolute(name)) {
       preset = await loadLocalPreset(path.resolve(name))
     } else if (name.includes('/')) {
@@ -399,10 +401,10 @@ module.exports = class Creator extends EventEmitter {
     const presets = this.getPresets()
     const presetChoices = Object.entries(presets).map(([name, preset]) => {
       let displayName = name
-      if (name === 'default') {
+      // Vue version will be showed as features anyway,
+      // so we shouldn't display it twice.
+      if (name === 'Default (Vue 2)' || name === 'Default (Vue 3)') {
         displayName = 'Default'
-      } else if (name === '__default_vue_3__') {
-        displayName = 'Default (Vue 3)'
       }
 
       return {

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

@@ -80,8 +80,8 @@ exports.defaults = {
   packageManager: undefined,
   useTaobaoRegistry: undefined,
   presets: {
-    'default': Object.assign({ vueVersion: '2' }, exports.defaultPreset),
-    '__default_vue_3__': Object.assign({ vueVersion: '3' }, exports.defaultPreset)
+    'Default (Vue 3)': Object.assign({ vueVersion: '3' }, exports.defaultPreset),
+    'Default (Vue 2)': Object.assign({ vueVersion: '2' }, exports.defaultPreset)
   }
 }
 

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

@@ -1,27 +1,19 @@
 module.exports = cli => {
-  cli.injectFeature({
-    name: 'Choose Vue version',
-    value: 'vueVersion',
-    description: 'Choose a version of Vue.js that you want to start the project with',
-    checked: true
-  })
-
   cli.injectPrompt({
     name: 'vueVersion',
-    when: answers => answers.features.includes('vueVersion'),
     message: 'Choose a version of Vue.js that you want to start the project with',
     type: 'list',
     choices: [
-      {
-        name: '2.x',
-        value: '2'
-      },
       {
         name: '3.x',
         value: '3'
+      },
+      {
+        name: '2.x',
+        value: '2'
       }
     ],
-    default: '2'
+    default: '3'
   })
 
   cli.onPromptComplete((answers, options) => {