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 标签，而是自行定制了一系列的标签（包括标签属性），以按钮为例，其源代码大概是这样的：

主要按钮

除了样式以外，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样式进行调整，例如：
  
  //学习更多的Element UI的做法，例如：

设计登录视图Demo

修改APP.vue页面，代码如下：



<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>

学习记录，如有侵权请联系删除

泽兴芝士网

一站式 IT 编程学习资源平台

Vue脚手架使用Element UI

用户登录