fix: fix duplicate id="app" in Vue 3 project template (#5852)

closes #5813

Author: haoqunjiang

packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js

@@ -85,6 +85,8 @@ test('use with Vue 3', async () => {
 
  expect(files['src/main.js']).toMatch('.use(router)')
 
+ expect(files['src/App.vue']).not.toMatch('<div id="app">')
+
  expect(pkg.dependencies).toHaveProperty('vue-router')
  expect(pkg.dependencies['vue-router']).toMatch('^4')
 })

packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue

@@ -0,0 +1,63 @@
+---
+extend: '@vue/cli-service/generator/template/src/App.vue'
+replace:
+ - !!js/regexp /<template>[^]*?<\/template>/
+ - !!js/regexp /\n<script>[^]*?<\/script>\n/
+ - !!js/regexp / margin-top[^]*?<\/style>/
+---
+
+<%# REPLACE %>
+<template>
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
+</template>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+<%# END_REPLACE %>
+
+<%# REPLACE %>
+}
+
+<%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
+ <%_ if (!rootOptions.cssPreprocessor) { _%>
+#nav {
+ padding: 30px;
+}
+
+#nav a {
+ font-weight: bold;
+ color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+ color: #42b983;
+}
+ <%_ } else { _%>
+#nav {
+ padding: 30px;
+
+ a {
+ font-weight: bold;
+ color: #2c3e50;
+
+ &.router-link-exact-active {
+ color: #42b983;
+ }
+ }
+}
+ <%_ } _%>
+<%_ } else { _%>
+#nav
+ padding 30px
+ a
+ font-weight bold
+ color #2c3e50
+ &.router-link-exact-active
+ color #42b983
+<%_ } _%>
+</style>
+<%# END_REPLACE %>

packages/@vue/cli-service/__tests__/generator.spec.js

@@ -46,4 +46,6 @@ test('Vue 3', async () => {
  expect(pkg).toHaveProperty(['devDependencies', '@vue/compiler-sfc'])
 
  expect(files['src/main.js']).toMatch(`import { createApp } from 'vue'`)
+
+ expect(files['src/App.vue']).not.toMatch('<div id="app">')
 })

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

@@ -1,11 +1,9 @@
 module.exports = (api, options) => {
- const isVue3 = (options.vueVersion === '3')
  api.render('./template', {
- isVue3,
  doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
  })
 
- if (isVue3) {
+ if (options.vueVersion === '3') {
  api.extendPackage({
  dependencies: {
  'vue': '^3.0.0-0'

packages/@vue/cli-service/generator/template/src/App.vue

@@ -1,4 +1,12 @@
 <template>
+<%_ if (rootOptions.vueVersion === '3') { _%>
+ <img alt="Vue logo" src="./assets/logo.png">
+ <%_ if (!rootOptions.bare) { _%>
+ <HelloWorld msg="Welcome to Your Vue.js App"/>
+ <%_ } else { _%>
+ <h1>Welcome to Your Vue.js App</h1>
+ <%_ } _%>
+<%_ } else { _%>
  <div id="app">
  <img alt="Vue logo" src="./assets/logo.png">
  <%_ if (!rootOptions.bare) { _%>
@@ -7,6 +15,7 @@
  <h1>Welcome to Your Vue.js App</h1>
  <%_ } _%>
  </div>
+<%_ } _%>
 </template>
 <%_ if (!rootOptions.bare) { _%>
 

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

@@ -1,4 +1,4 @@
-<%_ if (isVue3) { _%>
+<%_ if (rootOptions.vueVersion === '3') { _%>
 import { createApp } from 'vue'
 import App from './App.vue'