Vue 后台管理项目3-饿了吗UI导入

饿了吗UI导入

1.饿了吗UI安装使用

Ⅰ.安装饿了吗UI
 传送门http://element-cn.eleme.io/#/zh-CN/component/installation，
 在package.json同级目录的终端输入指令cnpm i element-ui -S

Ⅱ.项目导入饿了吗UI(在main.js入口文件里)

//用下面的代码替换main.js 中原本的所有代码

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

Vue.use(ElementUI);

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

Ⅲ.ui框架使用注意

NO.	描述
1	ui框架起辅助的作用，找得到的布局直接用，找不到的不要花费太多时间，自己写
2	随着ui框架使用时间的增加，你会知道哪些有，哪些没有，下次再找的时候就会快很多

2.饿了吗UI表单实现登录页面

Ⅰ.饿了吗UI组件

NO.	描述
1	Form 表单，传送门:http://element-cn.eleme.io/#/zh-CN/component/form
2	Button 按钮，传送门:http://element-cn.eleme.io/#/zh-CN/component/button#button-an-niu

Form 表单组件运用

image

Button 按钮组件

image

Ⅱ.项目导入全局样式

image

Ⅲ.项目导入css预处理
安装
传送门https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8(下面二选一即可)
在package.json同级目录的终端输入指令cnpm install -D sass-loader node-sass，导入sass
在package.json同级目录的终端输入指令cnpm install -D less-loader less，导入less

导入使用:在 *.vue 文件中如下使用即可

image

Ⅳ.输入框密文处理
在Form 表单组件页，用ctrl+F弹出当前页搜索，输入password即可找到相应的密文输入框.
参照可以知道输入框增加属性type="password"就可以变成密文.

3.初步效果及代码

Ⅰ.初步效果:

image

Ⅱ.App.vue代码:

<template>
  <div id="app">
    <!-- 3.再用一个大盒子包裹,控制登录框大小和位置 -->
    <div class="form-container">
      <h2>用户登录</h2>
      <!-- 1.通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部 -->
      <!-- 2.将一些默认formLabelAlign、name、region等名称改掉 -->
      <el-form label-position="top" label-width="80px" :model="formData">
        <el-form-item label="用户名">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <!-- 密码输入框增加属性type="password"就可以变成密文 -->
          <el-input v-model="formData.password" type="password"></el-input>
        </el-form-item>
        <el-button class="login-btn" type="success">成功按钮</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
// 这里的formData、username、password都要跟上面的html代码对应
export default {
  name: "app",
  data() {
    return {
      formData: {
        username: "",
        password: "",
      }
    };
  }
};
</script>

<style lang="scss">
//  删除默认样式,重新编写 
#app {
  height: 100%;
  background-color: #324152;
  display: flex;
  justify-content: center;
  align-items: center;
  .form-container {
    background-color: #fff;
    width: 500px;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 10px;
    .login-btn {
      width: 100%;
    } 
  }
}


</style>

本文同步发表在我的个人博客：https://www.lubaojun.com/