餓了嗎UI導(dǎo)入
1.餓了嗎UI安裝使用
Ⅰ.安裝餓了嗎UI
?官網(wǎng)傳送門http://element-cn.eleme.io/#/zh-CN/component/installation，
?在package.json同級(jí)目錄的終端輸入指令cnpm i element-ui -S
Ⅱ.項(xiàng)目導(dǎo)入餓了嗎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框架起輔助的作用，找得到的布局直接用，找不到的不要花費(fèi)太多時(shí)間，自己寫 |
| 2 | 隨著ui框架使用時(shí)間的增加，你會(huì)知道哪些有，哪些沒有，下次再找的時(shí)候就會(huì)快很多 |
2.餓了嗎UI表單實(shí)現(xiàn)登錄頁面
Ⅰ.餓了嗎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 |
Ⅱ.項(xiàng)目導(dǎo)入全局樣式
Ⅲ.項(xiàng)目導(dǎo)入css預(yù)處理
安裝
傳送門https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8(下面二選一即可)
在package.json同級(jí)目錄的終端輸入指令cnpm install -D sass-loader node-sass，導(dǎo)入sass
在package.json同級(jí)目錄的終端輸入指令cnpm install -D less-loader less，導(dǎo)入less
Ⅳ.輸入框密文處理
在Form 表單組件頁，用ctrl+F彈出當(dāng)前頁搜索，輸入password即可找到相應(yīng)的密文輸入框.
參照可以知道輸入框增加屬性type="password"就可以變成密文.
3.初步效果及代碼
Ⅱ.App.vue代碼:
<template>
<div id="app">
<!-- 3.再用一個(gè)大盒子包裹,控制登錄框大小和位置 -->
<div class="form-container">
<h2>用戶登錄</h2>
<!-- 1.通過設(shè)置 label-position 屬性可以改變表單域標(biāo)簽的位置，可選值為 top、left，當(dāng)設(shè)為 top 時(shí)標(biāo)簽會(huì)置于表單域的頂部 -->
<!-- 2.將一些默認(rèn)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代碼對(duì)應(yīng)
export default {
name: "app",
data() {
return {
formData: {
username: "",
password: "",
}
};
}
};
</script>
<style lang="scss">
// 刪除默認(rèn)樣式,重新編寫
#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>
本文同步發(fā)表在我的個(gè)人博客：https://www.lubaojun.com/
