一起學Vue：UI框架(element-ui)

目標

使用Vue+ElementUI構建一個非常簡單CRUD應用程序，以便您更好地了解它的工作方式。

效果頁面

比如我們要實現這樣列表、新增、編輯三個頁面：

列表頁面

新增頁面

編輯頁面

安裝element

我們使用 vue-cli@3 進行安裝

vue add element

列表組件（TodoListWithUI.vue）

與我們上次講的無UI的列表組件邏輯基本都是一樣的，我們這裡主要用到了el-table，el-button這兩個UI組件，至於UI組件的用法我們這裡就不介紹了，大家直接上官網上看示例代碼就好了，我們在這裡直接貼代碼：

<template>
<div style="text-align:left">
    <el-button type="text" @click="addTodo()">新增</el-button>
    <el-table :data="Todos" style="width: 100%">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="Name" label="名稱">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button @click="editTodo(scope.$index)" type="text" size="small">編輯</el-button>
                <el-button @click="deleteTodo(scope.$index)" type="text" size="small">刪除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <TodoAddWithUI :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo"  @cancel="cancel"></TodoAddWithUI>
    <TodoEditWithUI :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo" @cancel="cancel"></TodoEditWithUI>
</div>
</template>

<script>
import TodoAddWithUI from './TodoAddWithUI.vue'
import TodoEditWithUI from './TodoEditWithUI.vue'
export default {
    components: {
        TodoAddWithUI,
        TodoEditWithUI
    },
    data() {
        return {
            selectedIndex: -1, // 選擇了哪條記錄
            selectedItem: {}, // 選中的信息
            addDialogVisible: false,
            editDialogVisible: false,
            Todos: [{
                    Name: "遛狗"
                },
                {
                    Name: "跑步"
                }
            ]
        };
    },
    methods: {
        setTodos(arr) {
            this.Todos = JSON.parse(JSON.stringify(arr));
        },
        addTodo() {
            this.addDialogVisible = true;
        },
        createTodo(item) {
            this.Todos.push(item);
            this.setTodos(this.Todos);
            this.selectedIndex = -1;
            this.selectedItem = {}
            this.addDialogVisible = false;
        },
        editTodo(index) {
            this.selectedIndex = index;
            this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));
            this.editDialogVisible = true;
        },
        updateTodo(item) {
            this.Todos[this.selectedIndex] = item;
            this.setTodos(this.Todos);
            this.selectedIndex = -1;
            this.selectedItem = {}
            this.editDialogVisible = false;
        },
        deleteTodo(index) {
            this.Todos.splice(index, 1);
            this.selectedIndex = -1;
            this.selectedItem = {}
        },
        cancel() {
            this.addDialogVisible = false;
            this.editDialogVisible = false;
        },
    }
};
</script>

新增組件（TodoAddWithUI.vue）

我們主要用到了el-dialog，el-form，直接貼代碼：

<template>
<el-dialog title="待辦事項（新增）" :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="名稱">
      <el-input v-model="selectedItem.Name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="save">確 定</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
    props: {
        selectedItem: Object,
        dialogVisible: Boolean,
    },
    methods: {
        save() {
            this.$emit('save', this.selectedItem);
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style scoped>
</style>

編輯組件（TodoEditWithUI.vue）

我TodoAddWithUI基本上一樣，你也可以把這兩個合併成一個組件，我們為了邏輯更加清楚就分開了，直接貼代碼：

<template>
<el-dialog title="待辦事項（編輯）" :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="名稱">
      <el-input v-model="selectedItem.Name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="save">確 定</el-button>
  </div>
</el-dialog>
</template>

<script>
export default {
    props: {
        selectedItem: Object,
        dialogVisible: Boolean,
    },
    methods: {
        save() {
            this.$emit('save', this.selectedItem);
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style scoped>
</style>

小結

目前為止，我們完成了Vue+ElementUI的CRUD，是不是還是挺簡單的呀。其實你如果用其他的UI框架，操作方式也差不多。

文中用到的代碼我們放在：//github.com/zcqiand/miscellaneous/tree/master/vue

在這裡我推薦一些人氣比較高的UI框架：

1.Vuetify

Star 數為 11K，提供了 80 多個 Vue.js 組件，這些組件是根據谷歌 Material Design 指南實現的。Vuetify 支持所有平台上的瀏覽器，包括 IE11 和 Safari 9+（使用 polyfill），並提供了 8 個 vue-cli 模板。

地址：//github.com/vuetifyjs/vuetify

2.Quasar

Star 數超過 6K，是構建 Vue.js 響應式網站、PWA、混合移動應用和 Electron 應用的流行框架。Quasar 還支持諸如 HTML/CSS/JS 壓縮、緩存清除、搖樹優化（tree shaking）、源映射、代碼分割和延遲加載、ES6 轉碼等功能。

地址：//github.com/quasarframework/quasar

3. Vux

Star 數超過 13K，是一個流行的社區庫，基於 WeUI 和 Vue 2.0。該庫還支持 webpack+vue-loader+vux 的工作流。它的文檔也是中文的。

地址：//github.com/airyland/vux

4. iView

Star 數將近 16K，提供了數十種用 Vue.js 構建的 UI 組件和小部件，並採用了乾淨而優雅的設計。iView 被廣泛採用，社區也在積極維護，並提供了 CLI 工具用於以可視化的方式創建項目。這個也值得一試。

地址：//github.com/iview/iview

5.Mint UI

Star 數超過 11K，為 Vue.js 提供 UI 元素，提供了用於構建移動應用程序的 CSS 和 JS 組件。當全部導入時，壓縮後的代碼只有月 30KB（JS+CSS），當然它也支持單個組件的導入。

地址：//github.com/ElemeFE/mint-ui/

6.Ant Design Vue

Star 數約 1.5K，用於開發具有數十個 Ant Design 實現組件的企業級後端產品，並支持基於 Webpack 調試的構建解決方案（支持 ES6）。請注意，它的開發已經停止了一段時間。

地址：//github.com/okoala/vue-antd

Tags:

VirMach 便宜 VPS

QNews

QNews