Vue + ElementUI 实现后台管理系统模板 -- 前端篇（三）：引入 element-ui 定义基本页面显示_vui element后台管理模板

一、安装 element-ui

1》简介

UI框架。使用 element-ui 用于实现页面的绘制。 

【官网：】
    https://element.eleme.cn/#/zh-CN
    
【文档：】
    https://element.eleme.cn/#/zh-CN/component/installation

2》安装

UI框架。使用 element-ui 用于实现页面的绘制。 

【安装方式一：（npm 安装）】
    npm i element-ui -S
    
【安装方式二：（CDN 方式引入）】
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

3》引入 element-ui
　　在 main.js 中引入（也可以自定义一个 js，然后在 main.js 中引入自定义的 js）。

二、修改app.vue

1》简介

入口文件，通过 router 将组件 显示在 router-view 标签处。

2》修改页面内容

<template>
  <div id="app">
    <router-view />
  </div>
</template>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

三、404页面

1》简介
　定义错误页面。当错误发生时，用于跳转到 404 页面。

2》views目录下新建页面404.vue 代码

<template>
  <div class="error-wrapper">
    <h2 class="not-find-title">404</h2>
    <p class="not-find-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
    <el-button @click="$router.go(-1)">返回上一页</el-button>
    <el-button type="primary" class="not-find-btn-gohome" @click="$router.push({ name: 'Home' })">进入首页</el-button>
  </div>
</template>
<script>
export default {
  name: '404',
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.error-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
 
.not-find-title {
  margin: 20px 0 15px;
  font-size: 10em;
  font-weight: 400;
  color: rgb(55, 71, 79);
}
 
.not-find-desc {
  margin: 0 0 30px;
  font-size: 26px;
  color: rgb(118, 131, 143);
}
 
.not-find-desc > em {
  font-style: normal;
  color: #ee8145;
}
 
.not-find-btn-gohome {
  margin-left: 30px;
}
</style>

3》路由

{
      path: "*",
      name: "404",
      component: () => import('./views/404.vue')
    },

 4》页面展示

四、Login.vue登录页面 

1》简介

登录页 未登录时跳转到登录页面

2》页面代码 

 
<template>
  <div class="login" :style="{ backgroundImage: 'url(' + loginBg + ')' }">
    <div class="wrapper">
      <h3 class="head">CMS后台管理系统</h3>
      <el-form :rules="rules" size="medium" :model="loginForm" ref="loginForm" class="login-form" @keyup.enter.native="submitForm">
        <el-form-item prop="username">
          <el-input size="medium" type="text" v-model.trim="loginForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" type="password" v-model.trim="loginForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import md5 from 'js-md5';
 
export default {
  name: 'Login',
  data() {
    return {
      loginBg: require('../assets/images/login-bg.png'),
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: 'true', message: '账户不能为空', trigger: 'blur' }],
        password: [{ required: 'true', message: '密码不能为空', trigger: 'blur' }],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      // 登录
      // this.$router.push({
      //   name: 'Home',
      // });
    },
  },
};
</script>
<style scoped>
.login {
  height: 100vh;
  background-size: 100% 100%;
}
.wrapper {
  position: absolute; /* fixed 同理 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20rem;
}
.head {
  margin-bottom: 25px;
  color: #fff;
  font-size: 24px;
}
</style>

注意：随意准备一张背景图login-bg.png放在文件夹assets的images文件夹下 

3》页面路由

{
      path: "/login",
      name: "Login",
      component: () => import("./views/login.vue")
    }

4》页面效果

补充：有木有报错 有没有报错 下面的报错有吗？

 别急 安装两个依赖就搞定了

npm install sass-loader node-sass --save-dev