公司最近的项目是后台管理系统，由我负责。 试着在网上找模板，还需要改变很多方面。 另外，那些模板中也没有写代码的实现构想。 因为缺乏vue项目经验的人很难理解，所以按照自己的构想从零开始实现一次。 过程的说明还很详细，如果有不足的地方请指出来。
总体布局：
登录：
菜单：
准备工作：
1、安装电子用户界面
npm i element-ui -S
导入元素'元素- ui '导入元素- ui/lib/theme-chalk/index.CSS ' vue.use (元素ui )
2、配置路由
index.js:
importvuefrom ' vue ' importvuerouterfrom ' vue-router ' const home=()=import (./views/home/home.vue ) ) )。
const Login=()=import ) (./views/login/login.vue ) ) ) ) )。
vue.use (vue路由器) )。
const routes=[
{
path:'/'，
name:'Login '，
组件： log in
(，
{
path:'/home '，
名称： ' home '，
组件：家庭
(，
]
常数路由器=newvue router ({ (
模式： ' history '，
base: process.env.BASE_URL，
鲁特兹
() )
导出默认路由器
3 .开始写组件
一.登录登录
用户登录
name:'Login '，
数据() {return{
formdata: {
username: '，
password: '，
(，
(；
(，
(；
使用el-form表单进行布局。 label-position='top '表示表单域标签的位置上下对齐，model='formdata '表示绑定的数据
查看渲染效果
调整样式：
. login-wrap{height:100%； 背景： # 324152； 显示： Flex； justify-content:center； align-items3360中心；
}.login-form{width:400px； 后台： # FFf； border-radius:5px； padding:30px；
}.login-btn{width:100%；
}
样式齐全后，开始通过aioxs发送登录请求
安装axios，然后单击，
npm i axios -s
引入main.js
importaxiosfrom'axios '
Vue.prototype.$http=axios
在另一个组件上通过this.$http.post(get )发送请求
在login.vue中使用：
methods:{
handleLodin ()//测试版本
//if(this.formdata.username！=='' this.formdata.password！==' ' ) {
//this.$ router.push ({ path : '/home ' } )
2 .提示成功
//this.$message({ ()
//showClose: true，
//message:“登录成功”、
//type: 'success '
//；
//}else {
//this.$message({ ()
//showClose: true，
//message: '用户名和密码不能为空'，
//type: 'error '
//；
//}
//需要向正式版本发送请求
//url是发送请求的地址
this.$http.post('URL '，this.formdata ).then ) )请求RES={//返回的数据
console.log(RES ) /保存token :
localstorage.setitem('token '，res.data.token )//成功登录
if(RES.data.status===200 ) (跳至/1.home页面
this.$ router.push ({ path : '/home ' } )/2 .提示成功
this.$message({ ((
show close :真，
消息：“登录成功”、
type:'success'}；
}else { //登录失败
this.$message({ ((
show close :真，
消息：“用户名或密码错误”，
type:'error'}；
}
() )
}
}
单击登录按钮可触发handleclick事件并发送axios请求。 如果登录成功，则跳至下一页，显示登录成功的消息，如果失败，则抛出错误消息。 在这里，我写了两个版本。 一个是正式发送请求，另一个是测试版本，可以测试在没有后端接口时在此测试版本中抛出的登录成功和失败消息。
斜坡枯萎成功和失败的条件可以根据实际项目情况进行修正。
二.菜单菜单菜单
首先，布局分为三个部分，头部header、侧栏aside、右侧主体、elementui中的布局如下
头儿
Aside
主要的
name:'Home'} '；
然后，向页面添加样式。
头儿
aside
主要的
name:'Home'} '；
. container{height:100vh； font-size:15px；
}.header { background : # 212121； color:#fff；
}.aside{background:#3a3a3a； color:#fff；
/*高： 100 %； */
}.main{
/*高： 100 %； */color:#212121；
}
查看效果：
然后头部样式布局：按24层布局。
头部分为两部分，左边表示16栏，右边表示8栏的el-row表示1行，el-col表示行
/