From 68c371df2e045db36499915411a348f2d9278335 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 4 Nov 2021 16:08:30 +0800
Subject: [PATCH 1/3] chore: don't throw error on single-word component names
 for now

We'll fix it later. But that is not the goal of this PR.
---
 packages/@vue/cli-ui-addon-webpack/.eslintrc.js | 3 +++
 packages/@vue/cli-ui-addon-widgets/.eslintrc.js | 3 ++-
 packages/@vue/cli-ui/.eslintrc.js               | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/@vue/cli-ui-addon-webpack/.eslintrc.js b/packages/@vue/cli-ui-addon-webpack/.eslintrc.js
index ab7c1dc63a..4a2b4dd2c5 100644
--- a/packages/@vue/cli-ui-addon-webpack/.eslintrc.js
+++ b/packages/@vue/cli-ui-addon-webpack/.eslintrc.js
@@ -15,5 +15,8 @@ module.exports = {
     babelOptions: {
       cwd: __dirname
     }
+  },
+  rules: {
+    'vue/multi-word-component-names': 'warn'
   }
 }
diff --git a/packages/@vue/cli-ui-addon-widgets/.eslintrc.js b/packages/@vue/cli-ui-addon-widgets/.eslintrc.js
index e6df3ac965..5ca8071ca2 100644
--- a/packages/@vue/cli-ui-addon-widgets/.eslintrc.js
+++ b/packages/@vue/cli-ui-addon-widgets/.eslintrc.js
@@ -9,7 +9,8 @@ module.exports = {
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'warn'
   },
   parserOptions: {
     parser: '@babel/eslint-parser',
diff --git a/packages/@vue/cli-ui/.eslintrc.js b/packages/@vue/cli-ui/.eslintrc.js
index 3c45b98389..e2094b68ec 100644
--- a/packages/@vue/cli-ui/.eslintrc.js
+++ b/packages/@vue/cli-ui/.eslintrc.js
@@ -19,7 +19,8 @@ module.exports = {
     'vue/html-self-closing': 'error',
     'vue/no-use-v-if-with-v-for': 'warn',
     'vue/no-unused-vars': 'warn',
-    'vue/return-in-computed-property': 'warn'
+    'vue/return-in-computed-property': 'warn',
+    'vue/multi-word-component-names': 'warn'
   },
 
   parserOptions: {

From 2ae8e2b05eb6117404ee9bb349624b7d83b6dfaf Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 4 Nov 2021 16:48:06 +0800
Subject: [PATCH 2/3] refactor: use multi-word names for router views

- About -> AboutView
- Home -> HomeView

This is to fix the errors raised by the new eslint rule
<https://eslint.vuejs.org/rules/multi-word-component-names.html>
---
 .../__tests__/routerGenerator.spec.js                | 12 ++++++------
 .../generator/template-vue3/src/router/index.js      |  8 ++++----
 .../generator/template/src/router/index.js           |  8 ++++----
 .../template/src/views/{About.vue => AboutView.vue}  |  0
 .../template/src/views/{Home.vue => HomeView.vue}    |  2 +-
 .../__tests__/tsGenerator.spec.js                    |  6 +++---
 .../src/views/{Home.vue => HomeView.vue}             |  6 +++---
 .../template/src/views/{Home.vue => HomeView.vue}    |  6 +++---
 8 files changed, 24 insertions(+), 24 deletions(-)
 rename packages/@vue/cli-plugin-router/generator/template/src/views/{About.vue => AboutView.vue} (100%)
 rename packages/@vue/cli-plugin-router/generator/template/src/views/{Home.vue => HomeView.vue} (95%)
 rename packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/{Home.vue => HomeView.vue} (91%)
 rename packages/@vue/cli-plugin-typescript/generator/template/src/views/{Home.vue => HomeView.vue} (91%)

diff --git a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
index b9121c2a3b..0e8a165f06 100644
--- a/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
+++ b/packages/@vue/cli-plugin-router/__tests__/routerGenerator.spec.js
@@ -9,8 +9,8 @@ test('base', async () => {
 
   expect(files['src/router/index.js']).toBeTruthy()
   expect(files['src/router/index.js']).not.toMatch('history')
-  expect(files['src/views/About.vue']).toBeTruthy()
-  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/views/AboutView.vue']).toBeTruthy()
+  expect(files['src/views/HomeView.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
   expect(files['src/App.vue']).not.toMatch('<script>')
   expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
@@ -29,8 +29,8 @@ test('history mode', async () => {
 
   expect(files['src/router/index.js']).toBeTruthy()
   expect(files['src/router/index.js']).toMatch('history')
-  expect(files['src/views/About.vue']).toBeTruthy()
-  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/views/AboutView.vue']).toBeTruthy()
+  expect(files['src/views/HomeView.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
   expect(files['src/App.vue']).not.toMatch('<script>')
   expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
@@ -54,8 +54,8 @@ test('use with Babel', async () => {
 
   expect(files['src/router/index.js']).toBeTruthy()
   expect(files['src/router/index.js']).toMatch('component: () => import')
-  expect(files['src/views/About.vue']).toBeTruthy()
-  expect(files['src/views/Home.vue']).toBeTruthy()
+  expect(files['src/views/AboutView.vue']).toBeTruthy()
+  expect(files['src/views/HomeView.vue']).toBeTruthy()
   expect(files['src/App.vue']).toMatch('<router-link to="/">Home</router-link>')
   expect(files['src/App.vue']).not.toMatch('<script>')
   expect(files['src/App.vue']).toMatch('#nav a.router-link-exact-active')
diff --git a/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js b/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
index 8678e20202..d5a35148db 100644
--- a/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
+++ b/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
@@ -9,13 +9,13 @@ import { createRouter<%
     %>, RouteRecordRaw<%
   }
   %> } from 'vue-router'
-import Home from '../views/Home.vue'
+import HomeView from '../views/HomeView.vue'
 
 const routes<% if (hasTypeScript) { %>: Array<RouteRecordRaw><% } %> = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: HomeView
   },
   {
     path: '/about',
@@ -24,10 +24,10 @@ const routes<% if (hasTypeScript) { %>: Array<RouteRecordRaw><% } %> = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     <%_ if (doesCompile) { _%>
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
     <%_ } else { _%>
     component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/About.vue')
+      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
     }
     <%_ } _%>
   }
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/router/index.js b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
index bd387557f2..e8bd01de31 100644
--- a/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
+++ b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
@@ -4,7 +4,7 @@ import VueRouter, { RouteConfig } from 'vue-router'
 <%_ } else { _%>
 import VueRouter from 'vue-router'
 <%_ } _%>
-import Home from '../views/Home.vue'
+import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
@@ -16,7 +16,7 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: HomeView
   },
   {
     path: '/about',
@@ -25,10 +25,10 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     <%_ if (doesCompile) { _%>
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
     <%_ } else { _%>
     component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/About.vue')
+      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
     }
     <%_ } _%>
   }
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/views/About.vue b/packages/@vue/cli-plugin-router/generator/template/src/views/AboutView.vue
similarity index 100%
rename from packages/@vue/cli-plugin-router/generator/template/src/views/About.vue
rename to packages/@vue/cli-plugin-router/generator/template/src/views/AboutView.vue
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/views/Home.vue b/packages/@vue/cli-plugin-router/generator/template/src/views/HomeView.vue
similarity index 95%
rename from packages/@vue/cli-plugin-router/generator/template/src/views/Home.vue
rename to packages/@vue/cli-plugin-router/generator/template/src/views/HomeView.vue
index 9625893b5e..cff222ae39 100644
--- a/packages/@vue/cli-plugin-router/generator/template/src/views/Home.vue
+++ b/packages/@vue/cli-plugin-router/generator/template/src/views/HomeView.vue
@@ -15,7 +15,7 @@
 import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
-  name: 'Home',
+  name: 'HomeView',
   components: {
     HelloWorld
   }
diff --git a/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
index f2fd642900..b03656a056 100644
--- a/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
+++ b/packages/@vue/cli-plugin-typescript/__tests__/tsGenerator.spec.js
@@ -17,8 +17,8 @@ test('generate files', async () => {
   expect(files['src/main.ts']).toBeTruthy()
   expect(files['src/main.js']).toBeFalsy()
   expect(files['src/App.vue']).toMatch('<script lang="ts">')
-  // checks that the Home.vue file has not been created, even empty
-  expect(Object.prototype.hasOwnProperty.call(files, 'src/views/Home.vue')).toBeFalsy()
+  // checks that the HomeView.vue file has not been created, even empty
+  expect(Object.prototype.hasOwnProperty.call(files, 'src/views/HomeView.vue')).toBeFalsy()
 })
 
 test('classComponent', async () => {
@@ -92,7 +92,7 @@ test('use with router', async () => {
       options: {}
     }
   ])
-  expect(files['src/views/Home.vue']).toMatch('Welcome to Your Vue.js + TypeScript App')
+  expect(files['src/views/HomeView.vue']).toMatch('Welcome to Your Vue.js + TypeScript App')
 })
 
 test('tsconfig.json should be valid json', async () => {
diff --git a/packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/Home.vue b/packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/HomeView.vue
similarity index 91%
rename from packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/Home.vue
rename to packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/HomeView.vue
index 10729a6c17..7af751a805 100644
--- a/packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/Home.vue
+++ b/packages/@vue/cli-plugin-typescript/generator/template-vue3/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 ---
-extend: '@vue/cli-plugin-router/generator/template/src/views/Home.vue'
+extend: '@vue/cli-plugin-router/generator/template/src/views/HomeView.vue'
 when: "rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-router']"
 replace:
   - !!js/regexp /Welcome to Your Vue\.js App/
@@ -17,7 +17,7 @@ import { defineComponent } from 'vue';
 import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
 export default defineComponent({
-  name: 'Home',
+  name: 'HomeView',
   components: {
     HelloWorld,
   },
@@ -31,7 +31,7 @@ import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
     HelloWorld,
   },
 })
-export default class Home extends Vue {}
+export default class HomeView extends Vue {}
 <%_ } _%>
 </script>
 <%# END_REPLACE %>
diff --git a/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue b/packages/@vue/cli-plugin-typescript/generator/template/src/views/HomeView.vue
similarity index 91%
rename from packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
rename to packages/@vue/cli-plugin-typescript/generator/template/src/views/HomeView.vue
index 758e910ec5..7d61ef30dd 100644
--- a/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue
+++ b/packages/@vue/cli-plugin-typescript/generator/template/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 ---
-extend: '@vue/cli-plugin-router/generator/template/src/views/Home.vue'
+extend: '@vue/cli-plugin-router/generator/template/src/views/HomeView.vue'
 when: "rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-router']"
 replace:
   - !!js/regexp /Welcome to Your Vue\.js App/
@@ -17,7 +17,7 @@ import Vue from 'vue';
 import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
 export default Vue.extend({
-  name: 'Home',
+  name: 'HomeView',
   components: {
     HelloWorld,
   },
@@ -31,7 +31,7 @@ import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
     HelloWorld,
   },
 })
-export default class Home extends Vue {}
+export default class HomeView extends Vue {}
 <%_ } _%>
 </script>
 <%# END_REPLACE %>

From a4e8f256daa2096f1de3916de2a3771971678229 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Thu, 4 Nov 2021 16:54:15 +0800
Subject: [PATCH 3/3] refactor: named routes can use lower-case characters,
 avoiding being confused with the component names

---
 .../generator/template-vue3/src/router/index.js               | 4 ++--
 .../cli-plugin-router/generator/template/src/router/index.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js b/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
index d5a35148db..7bffdad96b 100644
--- a/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
+++ b/packages/@vue/cli-plugin-router/generator/template-vue3/src/router/index.js
@@ -14,12 +14,12 @@ import HomeView from '../views/HomeView.vue'
 const routes<% if (hasTypeScript) { %>: Array<RouteRecordRaw><% } %> = [
   {
     path: '/',
-    name: 'Home',
+    name: 'home',
     component: HomeView
   },
   {
     path: '/about',
-    name: 'About',
+    name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
diff --git a/packages/@vue/cli-plugin-router/generator/template/src/router/index.js b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
index e8bd01de31..53d728e3d9 100644
--- a/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
+++ b/packages/@vue/cli-plugin-router/generator/template/src/router/index.js
@@ -15,12 +15,12 @@ const routes = [
 <%_ } _%>
   {
     path: '/',
-    name: 'Home',
+    name: 'home',
     component: HomeView
   },
   {
     path: '/about',
-    name: 'About',
+    name: 'about',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.