refactor: use multi-word names for router views (#6809)

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')

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

@@ -9,25 +9,25 @@ 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
+    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.
     <%_ 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')
     }
     <%_ } _%>
   }

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)
 
@@ -15,20 +15,20 @@ const routes = [
 <%_ } _%>
   {
     path: '/',
-    name: 'Home',
-    component: 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.
     <%_ 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')
     }
     <%_ } _%>
   }

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
   }

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 () => {

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 %>

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 %>

packages/@vue/cli-ui-addon-webpack/.eslintrc.js

@@ -15,5 +15,8 @@ module.exports = {
     babelOptions: {
       cwd: __dirname
     }
+  },
+  rules: {
+    'vue/multi-word-component-names': 'warn'
   }
 }

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',

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: {