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: 'https://www.jb51.net/', 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 = false new Vue({ router, render: h => h(App), }).$mount('#app')
好了现在我们可以访问我们的页面了，忽略链接上的端口号，vue会根据你电脑端口的使用情况，自动选择一个合适的端口号，所以我的端口号可能跟你的不同。
:8081/#/ index页面，这是因为我在路由里使用redirect重定向
:8081/#/index 还是index页面
:8081/#/login login页面
ok 自此我们的路由配置成功。我这边访问页面是没有问题，如果你有问题，你就找下自己的错误在哪里。
6.element-ui下面就进入我们的页面开发模式，首先我们要开发的是login页。我们可以使用原生的html开发，但是，效率低下，所以我们还是用vue组件吧。这里我以element-ui为例
安装
D:\test\book>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> <div> <div>图书馆管理系统</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> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { name: 'Login', data() { return { form: { name: '', password: '' } } }, methods: { onSubmit() { }, }, } </script> <style> </style>
7.sass我们可以直接用css的，但是我不推荐这样用，因为原生太丑了。我们要使用css预处理器写css样式。css预处理器有sass和less，当然还有其他的但是我没用过。less我不推荐使用，因为功能不强、像自定义函数功能就没有，写代码特别别扭，我推荐sass。
安装sass
D:\test\book>yarn add node-sass sass-loader
vue-cli3 对sass简直是0配置，上面我们安装好处理器后，直接在style标签上加上 lang="scss" 就可以使用sass了。
修改Login.vue中的style
<style lang="scss"> .login { width: 100%; height: 100%; background: #000; .l-form { position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 300px; margin: auto; border-radius: 8px; background: #fff; padding: 20px; .l-tip { text-align: center; font-size: 24px; font-weight: bold; } .el-form { width: 100%; margin: auto; margin-top: 20px; .el-form-item { button { width: 100%; } } } } } </style>
样式跟我们想要的还有点差别，这是是因为父元素的样式问题引起的，修改App.vue中的style。主要是给html，body还有#app元素设置了宽和高和边距。
<template> <div> <router-view></router-view> </div> </template> <style lang="scss"> html, body, #app{ width: 100%; height: 100%; margin: 0px; padding: 0px; } </style>
再打开浏览器，看我们的页面，已经很好看了。页面长下面这样。
安装normalize.css 其实这个安不安装都可以，我是有强迫症就安装了。
安装
yarn add normalize.css
修改main.js引入normalize.css。
配置
import 'normalize.css'
9.axios我们在登录页要登录，这就涉及到了发ajax请求，这个我们使用axios
安装
D:\test\book>yarn add axios
使用