vue-cli3 + elementui 搭建后台管理界面(一)-登录

安装vue-cli

npm install vue-cli -g

创建项目

vue create myapp

选择 Manually select features

1.png

image.png

选择 node-sass 后面的样式就可以使用scss
image.png

安装并引入 element ui

npm install element-ui --save

编辑 src/main.js , 修改为

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

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

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

编写登录页面

src/views/Login.vue

<template>
  <div class="login-container">
    <el-form :model="myForm" :rules="myRule"
      status-icon
      ref="myForm" 
      label-position="left" 
      label-width="0px" 
      class="demo-ruleForm login-page">
        <h3 class="title">登录</h3>
        <el-form-item prop="username">
          <el-input type="text" 
              v-model="myForm.username" 
              auto-complete="off" 
              placeholder="用户名"
          />
        </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" 
                v-model="myForm.password" 
                auto-complete="off" 
                placeholder="密码"
            />
          </el-form-item>
        <el-checkbox 
            v-model="checked"
            class="rememberme"
        >记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      logining: false,
      myForm: {
        username: 'admin',
        password: '123456',
      },
      myRule: {
        username: [{required: true, message: '请输入账号', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },
      checked: false
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
              this.logining = false;
              sessionStorage.setItem('user', this.myForm.username);
              this.$router.push({path: '/'});
          }else{
            this.logining = false;
            this.$alert('账号或密码错误', '温馨提示', {
                confirmButtonText: '确定'
            })
          }
        }else{
          console.log('error submit!');
          return false;
        }
      })
    }
  }
};
</script>

<style>
.login-container {
  width: 100%;
  height: 100%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
</style>

增加路由

访问 login 要跳转到登录页面
修改 router/index.js 为

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

访问 http://127.0.0.1:8080/login 出现登录页面:

TIM图片20200115155516.png

文章改编自大神博客:https://www.cnblogs.com/wbjxxzx/p/9942648.html,仅作为学习实践。

推荐阅读更多精彩内容

  • 本文基于工作项目开发,做的整理笔记因工作需要,项目框架由最初的Java/jsp模式,逐渐转移成node/expre...
    SeasonDe阅读 6,474评论 3 35
  • 简介 参考博客: 全栈开发实战:用Vue2+Koa1开发完整的前后端项目(更新Koa2)前置技能: 具备Vue和K...
    Ghamster阅读 4,840评论 1 11
  • 第一个 vue-router 路由 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示hom...
    索伦x阅读 1,924评论 0 3
  • 2 知乎上关于离职有很多热门的讨论话题,譬如,“哪一个瞬间你觉得自己应该离职了?”“离职了给领导说什么?”“如何优...
    世俗的宝藏男孩阅读 145评论 1 5
  • 今天是中国的情人节 一座城、一个家、一对人 两个人在一起生活的“锁”事 才造就了点点滴滴的幸福! 祝战友们,七夕开...
    Mason神阅读 71评论 1 0