创建项目
项目准备
删除不要的组件
- 删除views文件夹
- 删除compoents目录下的所有文件
修改APP.vue
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
创建登录组件
在compoents目录下,新建Login.vue文件
<template>
<div>登录组件</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
</style>
设置路由
修改router目录下index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
// 根路径重定向到登录
{
path: '/',
redirect: '/login'
},
// 登录
{
path: '/login',
component: Login
}
]
const router = new VueRouter({
routes
})
export default router
启动项目
npm run serve
页面显示登录组件即可