views
home

<template>
  <div class="home">
    <div class="base-container">
      <div class="side-left">
        <div class="logo">
          <a href="/">
            <img
              src="../assets/images/logo.png"
              alt=""
            >
            <h1>Vue Element Admin</h1>
          </a>
        </div>
        <div class="nav-left">

        </div>
      </div>
      <div class="main">
        <div class="main-top">
          <div>
            面包屑
          </div>
          <div>user</div>
        </div>
        <div class="main-view">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.base-container {
  display: flex;
  .logo {
    height: 50px;
    line-height: 50px;
    background: #2b2f3a;
    a {
      text-decoration: none;
      display: flex;
      img {
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
      }
      h1 {
        color: #fff;
        font-size: 14px;
      }
    }
  }
  .side-left {
    width: 200px;
    color: rgb(191, 203, 217);
    background-color: rgb(48, 65, 86);
    .nav-left {
      height: calc(100vh - 50px);
    }
  }
  .main {
    width: calc(100vw - 200px);
    background-color: #f0f2f5;
  }
  .main-top {
    height: 50px;
    padding: 0 20px;
    line-height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .main-view {
    padding: 10px;
    height: calc(100vh - 50px);
    box-sizing: border-box;
  }
}
</style>

login

<template>
  <div class="login">
    <el-card
      class="login-container"
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span>
          请输入账号
        </span>
      </div>
      <!-- card body -->
      <el-form
        :model="user"
        ref="loginRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="user.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="login"
            :loading="isLoading"
          >确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: false,
      user: {
        username: 'admin',
        password: 'admin'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login() {
      this.isLoading = true
      this.$refs.loginRef.validate((valid) => {
        if (valid) {
          // alert('submit!')
          this.$http.Login({ username: this.user.username.trim(), password: this.user.password.trim() }).then(res => {
            console.log(res)
            this.isLoading = false
            this.$storage.setItem('userinfo', res.data.data)
            this.$storage.setItem('token', res.data.data.token)
            this.$router.push('/')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  .login-container {
    width: 25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

pagenofound

<template>
  <div>
    404
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
</style>

welcome

<template>
  <div class="welcome">
    欢迎进入xxx后台管理系统
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.welcome {
  height: 100%;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
}
</style>

app.vue

<template>
  <div class="app">
    app
    <el-button type="primary">按钮</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
</style>

image.png

main.js

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import './styles.scss'

Vue.use(ElementUI)

Vue.config.productionTip = false

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

style.scss

/* theme color */
$--color-primary: #409eff;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

.env.staging

NODE_ENV = development

ENV = 'staging'

VUE_APP_BASE_API = 'https://www.fastmock.site/mock/5afbe58d93f8657ec74c86c70ddaf38c/api'