目標(biāo)

使用Vue+ElementUI構(gòu)建一個(gè)非常簡單CRUD應(yīng)用程序，以便您更好地了解它的工作方式。

效果頁面

比如我們要實(shí)現(xiàn)這樣列表、新增、編輯三個(gè)頁面：

列表頁面

新增頁面

編輯頁面

安裝element

我們使用 vue-cli@3 進(jìn)行安裝

vue add element

列表組件(TodoListWithUI.vue)

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

新增編輯刪除

新增組件(TodoAddWithUI.vue)

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

取 消確 定

編輯組件(TodoEditWithUI.vue)

我TodoAddWithUI基本上一樣，你也可以把這兩個(gè)合并成一個(gè)組件，我們?yōu)榱诉壿嫺忧宄头珠_了，直接貼代碼：

取 消確 定

小結(jié)

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

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

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

1.Vuetify

Star 數(shù)為 11K，提供了 80 多個(gè) Vue.js 組件，這些組件是根據(jù)谷歌 Material Design 指南實(shí)現(xiàn)的。Vuetify 支持所有平臺上的瀏覽器，包括 IE11 和 Safari 9+(使用 polyfill)，并提供了 8 個(gè) vue-cli 模板。

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

2.Quasar

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

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

3. Vux

Star 數(shù)超過 13K，是一個(gè)流行的社區(qū)庫，基于 WeUI 和 Vue 2.0。該庫還支持 webpack+vue-loader+vux 的工作流。它的文檔也是中文的。

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

4. iView

Star 數(shù)將近 16K，提供了數(shù)十種用 Vue.js 構(gòu)建的 UI 組件和小部件，并采用了干凈而優(yōu)雅的設(shè)計(jì)。iView 被廣泛采用，社區(qū)也在積極維護(hù)，并提供了 CLI 工具用于以可視化的方式創(chuàng)建項(xiàng)目。這個(gè)也值得一試。

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

5.Mint UI

Star 數(shù)超過 11K，為 Vue.js 提供 UI 元素，提供了用于構(gòu)建移動應(yīng)用程序的 CSS 和 JS 組件。當(dāng)全部導(dǎo)入時(shí)，壓縮后的代碼只有月 30KB(JS+CSS)，當(dāng)然它也支持單個(gè)組件的導(dǎo)入。

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

6.Ant Design Vue

Star 數(shù)約 1.5K，用于開發(fā)具有數(shù)十個(gè) Ant Design 實(shí)現(xiàn)組件的企業(yè)級后端產(chǎn)品，并支持基于 Webpack 調(diào)試的構(gòu)建解決方案(支持 ES6)。請注意，它的開發(fā)已經(jīng)停止了一段時(shí)間。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。