初始化项目
先安装vue脚手架工具
1、cmd中输入:
vue ui
浏览器自打开UI:
http://localhost:8001/project/select
2、选择文件夹,点击创建:
3、填写项目名称:
4、选择一个预设的或者是手动配置,这里 选择手动配置了:
5、选择安装的功能,这里选择了四个:
6、选择标准配置:
7、可以保存预设:
8、安装vue-cli-plugin-elment:
9、点击安装,之后选着按需导入:
10、安装axios:
11、点击启动:
项目访问地址:http://localhost:8080/#/
12、清空默认页面,修改app.vue:
<template>
<div id="app">
APP根组件
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>
13、清理路由,index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
14、删除views目录
15、删除components中的HelloWorld.vue
此刻的项目已经是干净的项目了。
登录页面
1、在components下面,创建Login.vue
<template>
<div>
登录组件
</div>
</template>
<script>
export default {
}
</script>
<!-- scoped表示对该组件生效-->
<style lang="less" scoped>
</style>
2、在路由表中,添加两个路由,并导入登录组件
import Login from "../components/Login.vue"
const routes = [
{
path: "/",
redirect: "/login"
},
{
path: "/login",
component: Login
}
];
3、在APP.vue中,添加路由占位符
<template>
<div id="app">
<!-- 路由占位符-->
<router-view></router-view>
</div>
</template>
4、安装less-load和less
3、创建/assets/css/global.css文件
/** 全局样式表*/
html, body, #app {
height: 100%;
margin: 0;
padding: 0;
}
在main.js导入该css:
import "./assets/css/global.css"
但是此时.login_container还没有撑满全屏:
.login_container{
background: #2b4b6b;
height: 100%;
}
让盒子居中:
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
距离左50%,距离上50%,在坐标上往x轴左移自身的50%,向上移动自身的50%
通过命令安装element-ui:
npm i -S element-ui