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>
到此,主页创建完成,可以细化主页中的内容了