饿了吗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 |
Ⅱ.项目导入全局样式
Ⅲ.项目导入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
Ⅳ.输入框密文处理
在Form 表单组件页，用ctrl+F弹出当前页搜索，输入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">
// 删除默认样式,重新编写
#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/
