Vue脚手架使用Element UI
关于Element UI
Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开 发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计 资源，帮助网站快速成型。
Element UI的官方网址是：https://element.eleme.cn/
Element UI预定义了几乎所有标签的常规设计样式，在绝大 部分情况下，你不需要考虑例如按钮的宽度、高度、背景颜色、文本大小、 文本颜色等样式规则，只需要直接使用即可，例如Element UI提供的按 钮：
当然，除了按钮以外，对于表格、表单、表单中各控件、弹出框等常见的 页面元素，Element UI都设计了非常简约美观的样式，例如：
Element UI之所以被称之为“组件库”，是因为它不再使用传统的HTML 标签，而是自行定制了一系列的标签（包括 标签属性），以按钮为例， 其源代码大概是这样的：
<el-button type="primary">主要按钮</el-button>除了样式以外，Element UI还提 供了便利的表单控件的验证方式， 执行效果例如：
由于Element UI定义了大量的组件，每个组件都有许多属性，所以，学 习Element UI时需要记忆大量的组件特征，这将是一个非常漫长的过程， 通常不建议刻意的死记硬背，应该重点关注Element UI可以做到什么， 例如有哪些样式，各组件的核心属性等用法，然后结合官方文档 （https://element.eleme.cn/#/zh-CN/component/）进行开发。
安装Element UI
- 首先进入工程文件夹（如果使用IntelliJ IDEA打开了此工程，直接点击 IntelliJ IDEA下面的Terminal即可）：
//我的项目是放在这个位置，你们根据自己项目进入工程即可
cd d:/Vue-Workspace/vue-project-02- 然后使用npm命令安装Element UI，以下2条命令是等效的（注意：以下 命令区分大小写，例如最后的-S的字母是大写的）
//推荐第一种安装命令
npm i element-ui -S
//或者下面这种写法
npm install --save element-ui- 安装完成后，在工程的main.js中导入并使用Element UI：
// main.js 文件配置中加入下面三行
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);在页面中显示Element UI组件
1)：通过此前的学习，你应该知道有些文件在此工程中是可以不必保留的，应该将这些文件删除，例如：
- – 删除router/index.js中不必要的配置，
– 删除import HomeView from '../views/HomeView.vue'
– 删除routes常量中各对象（值为空数组即可）
- – 删除src/components/HelloWorld.vue
- – 删除src/views/HomeView.vue
- – 删除src/views/AboutView.vue
2)：如果你认为这些页面元素占据了100%宽度，并且默认是靠左对齐的 （当占据100%宽度时你可能看不出来），这样的显示效果不够美观，你可 以自行做一些调整：
//使用你已经掌握的CSS样式进行调整，例如：
<div style="width: 500px; margin: 0 auto;"> <!-- 页面元素 --> </div>
//学习更多的Element UI的做法，例如：
<div style="width: 500px; margin: 0 auto;">
<!-- 页面元素 -->
</div>
<el-row type="flex" justify="center">
<el-col :span="12">
<!-- 页面元素 -->
</el-col>
</el-row>设计登录视图Demo
修改APP.vue页面，代码如下：
<template>
<div id="app">
<el-row type="flex" justify="center">
<el-col :span="8">
<h3>用户登录</h3>
<el-divider></el-divider>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
var checkUsername = (rule, value, callback) => {
if (!value) {
return callback(new Error('用户名不能为空'));
}
callback();
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
}
callback();
};
return {
ruleForm: {
pass: '',
username: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
username: [
{ validator: checkUsername, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>学习记录，如有侵权请联系删除