Vue.config.productionTip = false
new 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:\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 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>
</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: '',