1、搭建Vue脚手架
本文是脚手架系列的第四篇,有兴趣的同学可以进入导航页进行学习:
如果本地还没有vue的搭建环境,可以参考下文:
搭建好vue环境后,我们下载我们的vue脚手架
vue init webpack dubbo-ui
通过idea启动后,访问localhost:8080就可以打开页面了
这样Vue的脚手架就算搭好了。
2、导入ElementUI
进入到项目所在目录,输入命令:npm install element-ui -S
同时我们也安装下axios
npm i axios
在main.js引入element-ui、axios,并注册
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 设置反向代理,前端请求默认发送到 http://localhost:8082/api
var axios=require('axios')
axios.defaults.baseURL='http://localhost:8082/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/*作用是阻止vue 在启动时生成生产提示。*/
Vue.use(axios)
Vue.use(ElementUI)
修改配置
3、搭建登录页
创建登录页
背景图片可以找一个自己喜欢的
<template>
<body id="poster">
<el-form class="login-container" label-position="left" label-width="0px">
<h3 class="login_title">系统登录</h3>
<el-form-item>
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
</el-form-item>
</el-form>
</body>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
methods: {
login() {
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}
})
.catch(failResponse => {
})
}
}
}
</script>
<style>
#poster {
background:url("../../assets/img/login_bg.jpg") no-repeat;
/*background-image: url(~@/assets/img/login_bg.jpg);*/
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body{
margin: 0px;
padding: 0;
}
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
</style>
修改路由
默认跳到我们新写的登录页上
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/common/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
}
]
})
把App.vue的样式都去掉,以免他影响我们登录页的样式
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
启动项目,出现这个就说明启动成功了
效果图
对接登录接口将在后续文章中介绍