1.在component目录下新建home.vue，代码如下：

<template>
  <div>
    主页
  </div>
</template>

<script>
export default {
}
</script>

<style lang="less" scoped>
</style>

此处会报错，意思就是让咱们去安装less依赖，去ui界面安装即可，需要安装两个依赖，分别是：
1.less-loader
2.less
此处要选择安装开发依赖
安装完成后重启项目报错就会消失，当然你也可以不使用less

2.配置路由，打开router.js下的index.js，插入代码：

// 插入部分 start
import Home from '../components/home.vue'
// 插入部分 end

const routes = [
  // 插入部分 start
  { path: '/', redirect: '/home' },
  { path: '/home', name: 'home', component: Home }
  // 插入部分 end
]

上面的代码意思是访问 / 和 /home 时都会跳至 home.vue组件

3.打开app.vue配置路由占位符，插入代码：

<template>
  <div id="app">
    <!-- 插入部分 start -->
    <!-- 路由占位符 -->
    <router-view></router-view>
    <!-- 插入部分 end-->
  </div>
</template>

到此，主页创建完成，可以细化主页中的内容了