一起學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框架，操作方式也差不多。
文中用到的程式碼我們放在：https://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 模板。
地址：https://github.com/vuetifyjs/vuetify
2.Quasar
Star 數超過 6K，是構建 Vue.js 響應式網站、PWA、混合移動應用和 Electron 應用的流行框架。Quasar 還支援諸如 HTML/CSS/JS 壓縮、快取清除、搖樹優化（tree shaking）、源對映、程式碼分割和延遲載入、ES6 轉碼等功能。
地址：https://github.com/quasarframework/quasar
3. Vux
Star 數超過 13K，是一個流行的社群庫，基於 WeUI 和 Vue 2.0。該庫還支援 webpack+vue-loader+vux 的工作流。它的文件也是中文的。
地址：https://github.com/airyland/vux
4. iView
Star 數將近 16K，提供了數十種用 Vue.js 構建的 UI 元件和小部件，並採用了乾淨而優雅的設計。iView 被廣泛採用，社群也在積極維護，並提供了 CLI 工具用於以視覺化的方式建立專案。這個也值得一試。
地址：https://github.com/iview/iview
5.Mint UI
Star 數超過 11K，為 Vue.js 提供 UI 元素，提供了用於構建移動應用程式的 CSS 和 JS 元件。當全部匯入時，壓縮後的程式碼只有月 30KB（JS+CSS），當然它也支援單個元件的匯入。
地址：https://github.com/ElemeFE/mint-ui/
6.Ant Design Vue
Star 數約 1.5K，用於開發具有數十個 Ant Design 實現元件的企業級後端產品，並支援基於 Webpack 除錯的構建解決方案（支援 ES6）。請注意，它的開發已經停止了一段時間。