目標

使用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/vue-antd

總結

以上是生活随笔為你收集整理的pyqt 获取 UI 中组件_一起学Vue：UI框架(elementui)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。