vue脚手架 1.在view中定义一个用户组件，内容自拟 2.在路由规则变中定义1条新规则，对应这个用户组件。并在app.vue中添 加router-link让其能够进行切换 3.在components中定义一个子组件，引入到用户组中进行使用 4.修改入口文件配置，让项目启动后，默认渲染用户组件，而不再是 app.vue.组件

1. 在view中定义一个用户组件，内容自拟

在 `src/views/` 中创建一个 `User.vue` 文件，定义用户组件的内容：

<template>
  <div>
    <h1>User Component</h1>
    <p>{{ message }}</p>
    <MySubComponent />
  </div>
</template>

<script>
import MySubComponent from '@/components/MySubComponent.vue';

export default {
  name: 'User',
  components: {
    MySubComponent,
  },
  data() {
    return {
      message: 'Hello, User!',
    };
  },
};
</script>

2. 在路由规则变中定义1条新规则，对应这个用户组件。并在app.vue中添加 router-link 让其能够进行切换

在 `src/router/index.js` 中定义路由规则：

import Vue from 'vue';
import Router from 'vue-router';
import User from '@/views/User.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/user',
    },
    {
      path: '/user',
      name: 'User',
      component: User,
    },
  ],
});

在 `src/App.vue` 中添加 `router-link`：

<template>
  <div id="app">
    <nav>
      <router-link to="/user">User Component</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

3. 在components中定义一个子组件，引入到用户组中进行使用

在 `src/components/` 中创建一个 `MySubComponent.vue` 文件，定义子组件的内容：

<template>
  <div>
    <h2>My Sub Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MySubComponent',
  data() {
    return {
      message: 'Hello from My Sub Component!',
    };
  },
};
</script>

在 `User.vue` 中引入 `MySubComponent`：

<template>
  <div>
    <h1>User Component</h1>
    <p>{{ message }}</p>
    <MySubComponent />
  </div>
</template>

<script>
import MySubComponent from '@/components/MySubComponent.vue';

export default {
  name: 'User',
  components: {
    MySubComponent,
  },
  data() {
    return {
      message: 'Hello, User!',
    };
  },
};
</script>

4. 修改入口文件配置，让项目启动后，默认渲染用户组件，而不再是 app.vue.组件

在 `src/main.js` 中修改入口文件配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

将 `App.vue` 组件的渲染放到 `main.js` 中：

import Vue from 'vue';
import User from '@/views/User.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(User),
}).$mount('#app');