1.vue项目组件梳理
1..1项目导入elementUI插件-----设置按需导入
1.2.关闭vue脚手架中的代码质量和纠错保存时检查
1.3.vue.app页面
<template>
<div id="app">
1111
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
</style>
1.4.router中index.js页面
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
1.5.删除view包/删除conponents中的helloword组建删掉
2.创建登录组件
2.1创建components中创建Login.vue
<template>
<div>
登录组件
</div>
</template>
<script>
export default{}
</script>
<!-- 支持less语法,控制样式生效区间,scoped只在当前组件生效 -->
<style lang="less" scoped>
</style>
2.2router中导入Login组件并配置路由规则
router:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
{path:'/login',component:Login}
]
const router = new VueRouter({
routes
})
export default router
vue.app填写路由占位符
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
</style>
2.3根路径重定向登录页面
{path:"/",redirect:'login'}
3.基本页面布局
3.1配置开发依赖less-loader/less 并重新运行App
切记:npm install less-loader@5.0.0 版本太高不能用
3.2设置全局样式表 assets/css/global.css
/*全局样式 global*/
html,body,#app{
height: 100%;
margin: 0;
padding: o;
}
3.3导入全局样式表
import './assets/css/global.css'
4.elementui组件引用
form表单 form—item input
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" />
</div>
<!-- 登录表单区 -->
<el-form label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item >
<el-input prefix-icon="iconfont iconuser"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item >
<el-input prefix-icon="iconfont iconsuo"></el-input>
</el-form-item>
<!-- 按钮区 -->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default{}
</script>
<!-- 支持less语法,控制样式生效区间,scoped只在当前组件生效 -->
<style lang="less" scoped>
.login_container{
background-color: #2b4b6b;
height: 100%;
}
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
.avatar_box{
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
img{
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_form{
position: absolute;
bottom: 0;
width: 100%;
padding: 0 30px;
box-sizing: border-box;
}
.btns{
display: flex;
justify-content: flex-end;
}
</style>
注意:input框中的图片需要在assets中加入iconfont文件,并在main.js中导入才可使用