import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Index from '../views/Index.vue'Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
redirect: '/index'
}, {
path: '/login',
name: 'Login',
components: Login
}, {
path: 'index',
name: 'Index',
components: Index
}]})
export default router
修改main.js，引入我们的路由。在第3行我引入了路由，在new Vue的时候还需要把router加进去了，这样才能正常使用路由。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = falsenew Vue({
router,
render: h => h(App),
}).$mount('#app')
好了现在我们可以访问我们的页面了，忽略链接上的端口号，vue会根据你电脑端口的使用情况，自动选择一个合适的端口号，所以我的端口号可能跟你的不同。
http://localhost:8081/#/ index页面，这是因为我在路由里使用redirect重定向
http://localhost:8081/#/index 还是index页面
http://localhost:8081/#/login login页面
ok 自此我们的路由配置成功。我这边访问页面是没有问题，如果你有问题，你就找下自己的错误在哪里。
6.element-ui
下面就进入我们的页面开发模式，首先我们要开发的是login页。我们可以使用原生的html开发，但是，效率低下，所以我们还是用vue组件吧。这里我以element-ui为例
安装
D:testbook>yarn add element-ui配置：在main.js中引入element
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
修改Login.vue。
把代码修改成下面这样子后，我们的表单就建完了。打开页面。发现我们页面功能是有了，但是太丑了，表单占据了整个页面的宽度，因此我们还要修改下样式。这里我们就要用到sass
<template>
<div class="login">
<div class="l-form">
<div class="l-tip">图书馆管理系统</div>
<el-form ref="form" :model="form">
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.password" type="password"></el-input>
