Vue2+element-ui后台管理系统（静态页面）

项目所需

node：https://nodejs.org/en/

git：https://git-scm.com/

vue：https://v2.cn.vuejs.org/v2/guide/installation.html

element-ui：https://element.eleme.cn/#/zh-CN/component/installation

项目所需：https://pan.baidu.com/s/1ua0jp9YCtPH6slE49HDUBw

提取码：kkkk

新建项目

在node和vue都调试、配置好的情况下使用vscode 在终端中输入命令

npm i -g @vue/cli 安装vue脚手架

安装成功后通过vue –version 可以查看版本

vue create 项目名 新建项目

vue create control

空格为取消选项 回车为选中

根据个人习惯选择css样式 本人喜欢使用sass

一路回车等待创建

此界面为创建成功

cd control 来到项目的目录 进行启动 （git命令自行学习）

此界面为开启成功

项目初始化

将以下标记全部删除

router/index.js最终页面

将views中文件全部删除，并新建Login.vue 和 Register.vue 文件，修改App.vue

Login 、 Register 和 App.vue 文件代码

// Login、Register和App.vue 文件代码

  
    Login // Register 
  


  export default {}

在router/index.js中配置路由信息

在App.vue中添加路由出口

此时打开在浏览器打开项目 为此界面即为成功

页面部署

引入element-ui

element-ui 哪里需要引哪里

代码

router/index.js

//router/index.js
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history", 
  base: process.env.BASE_URL,
  routes:[
    {path:'/login',component:()=>import('../views/Login.vue')},
    {
      path:'/home',
      component:()=>import('../views/Home.vue'),
      children:[
        {path:'/home/one-one',component:()=>import('../views/OneOne.vue')},
        {path:'/home/one-two',component:()=>import('../views/OneTwo.vue')},
        {path:'/home/one-thr',component:()=>import('../views/OneThr.vue')},
        {path:'/home/',redirect:'/home/one-one'}
      ]
    },
    {path:'/register',component:()=>import('../views/Register.vue')},
    {path:'/',redirect:'/login'}
  ]
});

export default router;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  el: '#app',
  render: h => h(App)
}).$mount('#app')

Home.vue

  

    
      
        
{{ $store.state.username }}
        欢迎您
      
      
        
          
        
      

    

    
      
        
          
            展开
            收起
          
          
            
              
                
                导航一
              
              
                分组一
                选项1
                选项2
              
              
                选项3
              
              
                选项4
                选项1
              
            
            
              
              导航二
            
            
              
              导航三
            
            
              
              导航四
            
          
        
      
      
        
      
    

    
      
        
        
      
      
        

          

            切换账号
          
        
      
    

  





export default {
  data() {
    return {
      isCollapse: true,
      show: false,
      imageUrl: '',
      t: null
    };
  },
  methods: {
    changeImg(key) {
      if (key == 'self') {
        this.show = true
        clearTimeout(this.t)
      } else {
        this.show = this.show ? false : true
      }

    },
    close() {
      let that = this
      this.t = setTimeout(() => {
        that.show = false
      }, 3000);
    },
    changeUser() {
      this.$router.push('/login')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    // 切换选项
    option(key) {
      switch (key) {
        case 11:
          this.$router.push('/home/one-one')
          break;
        case 12:
          this.$router.push('/home/one-two')
          break;
        case 13:
          this.$router.push('/home/one-thr')
          break;
      }
    }

  },
  mounted() {
    this.$store.state.username = localStorage.getItem('username')
  },
  beforeRouteLeave(to, from, next) {
    localStorage.clear()
    next()
  }
}



ul {
  list-style: none;
}

.control {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.conList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tit {
  width: 100%;
  height: 50px;
  background-color: rgb(27, 101, 237);
  display: flex;
  justify-content: right;

  .userInfo {
    width: 50px;
    height: 50px;
    margin-right: 30px;

    .userImg {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgb(11, 144, 100);
    }
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.ImgMenu {
  width: 200px;
  height: 400px;
  border-radius: 10px;
  position: absolute;
  right: 30px;
  top: 70px;
  background-color: rgba(155, 150, 150, .3);
}

.userName {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.left {
  width: 15%;
  height: 100%;
}

.right {
  width: 85%;
  height: 100%;
}

Login.vue

  
    
      
        
      
      
        
      
      
        登录
      
      
        注册
      
    
  



export default {
  data() {
    return {
      admin: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名格式错误", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码格式错误", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    login() {
      let that = this
      this.$refs.login.validate((valid) => {
        if (valid) {
          that.$router.push('/home')
        }
        else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.state.username = this.admin.username
    localStorage.setItem('username', this.admin.username)
    next()
  }
}



.login {
  width: 620px;
  height: 349px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgb(39, 38, 38);
  background-image: linear-gradient(skyblue,orange);
}

OneOne.vue

  
    
1-1
    

      

       {{ item }}
      
    
  



  export default {
    data(){
      return{
        oneData:['111','222','333','444']
      }
    }
    
  }



*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
.one-two{
  width: 100%;
  height: 100%;
}
.dataList{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.dataList li{
  width: 533px;
  height: 300px;
  img{
    width: 100%;
  }
}

自己动手丰衣足食！！！