From 34c09dc80344c7fa6f5614c110060f2823de3462 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Tue, 8 Sep 2020 19:44:08 +0800
Subject: [PATCH] fix: fix duplicate id="app" in Vue 3 project template (#5852)

closes #5813
---
 .../__tests__/routerGenerator.spec.js         |  2 +
 .../generator/template-vue3/src/App.vue       | 63 +++++++++++++++++++
 .../cli-service/__tests__/generator.spec.js   |  2 +
 packages/@vue/cli-service/generator/index.js  |  4 +-
 .../generator/template/src/App.vue            |  9 +++
 .../generator/template/src/main.js            |  2 +-
 6 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue

diff --git a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
index 2cf76c8207..b9121c2a3b 100644
--- a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
+++ b/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')
 })
diff --git a/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue b/packages/@vue/cli-plugin-router/generator/template-vue3/src/App.vue
new file mode 100644
index 0000000000..1ca554712f
--- /dev/null
+++ b/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 %>
diff --git a/packages/@vue/cli-service/__tests__/generator.spec.js b/packages/@vue/cli-service/__tests__/generator.spec.js
index 52d8bb082a..75b4073b4f 100644
--- a/packages/@vue/cli-service/__tests__/generator.spec.js
+++ b/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">')
 })
diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js
index 5502fdcf1c..2b56d228d7 100644
--- a/packages/@vue/cli-service/generator/index.js
+++ b/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'
diff --git a/packages/@vue/cli-service/generator/template/src/App.vue b/packages/@vue/cli-service/generator/template/src/App.vue
index ed2099802f..2d5fe75fa3 100644
--- a/packages/@vue/cli-service/generator/template/src/App.vue
+++ b/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) { _%>
 
diff --git a/packages/@vue/cli-service/generator/template/src/main.js b/packages/@vue/cli-service/generator/template/src/main.js
index 35d2e620e9..a11481c106 100644
--- a/packages/@vue/cli-service/generator/template/src/main.js
+++ b/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'