# 目標 使用Vue+ElementUI構建一個非常簡單CRUD應用程式，以便您更好地瞭解它的工作方式。 # 效果頁面 比如我們要實現這樣列表、新增、編輯三個頁面： **列表頁面**  **新增頁面**  **編輯頁面**  # 安裝element 我們使用 vue-cli@3 進行安裝 ``` vue add element ``` # 列表元件（TodoListWithUI.vue） 與我們上次講的無UI的列表元件邏輯基本都是一樣的，我們這裡主要用到了el-table，el-button這兩個UI元件，至於UI元件的用法我們這裡就不介紹了，大家直接上官網上看示例程式碼就好了，我們在這裡直接貼程式碼： ``` ``` # 新增元件（TodoAddWithUI.vue） 我們主要用到了el-dialog，el-form，直接貼程式碼： ``` ``` # 編輯元件（TodoEditWithUI.vue） 我TodoAddWithUI基本上一樣，你也可以把這兩個合併成一個元件，我們為了邏輯更加清楚就分開了，直接貼程式碼： ``` ``` # 小結 目前為止，我們完成了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）。請注意，它的開發已經停止了一段時間。 地址：https://github.com/okoala/