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框架使用时间的增加,大发pk10你 会知道哪些有,哪些没有,下次再找的时候就会快很多

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 表单组件运用

Button 按钮组件

Ⅱ.项目导入全局样式

Ⅲ.项目导入css预处理
安装
传送门http://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 文件中如下使用即可

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

3.初步效果及代码

Ⅰ.初步效果:

Ⅱ.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">
//  大发pk10删除
默认样式,重新编写 
#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>

本文同步发表在大发pk10我 的个人博客:http://www.lubaojun.com/

大发pk10推荐 阅读大发pk10更多 精彩内容

  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发大发pk10工具 ,提供了许多便利的写法,大大节省了设计...
    剃了胡子阅读 444评论 0赞 3
  • Vue和webpack俨然成为前端市场的主导 但是很多来大发pk10我 这里面试的小伙伴依然不知道怎么去搭建vue的开发环境 ...
    吴佳浩阅读 1,430评论 3赞 25
  • 本篇主要介绍三块知识点: node.js vue.js webpack前端工程化 本篇不是写给零基础的同学看的,读...
    3hours阅读 251评论 0赞 0
  • vue作为目前主流前端框架之一,很多各种安装依赖。为了提高效率,所以今天有时间就将一般会用到大发pk10关于 vue的安装依赖总...
    1米8女生也阅读 95评论 0赞 0
  • 项目大发pk10地址 http://github.com/hongchh/timeline-x 一、成品展示 二、项目需求 添...
    前端杨肖阅读 3,316评论 0赞 8