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

學習記錄，如有侵權請聯系刪除