一起學Vue:UI框架(element-ui)
阿新 • • 發佈:2020-10-29
# 目標
使用Vue+ElementUI構建一個非常簡單CRUD應用程式,以便您更好地瞭解它的工作方式。
# 效果頁面
比如我們要實現這樣列表、新增、編輯三個頁面:
**列表頁面**
![](https://gitee.com/zcqiand/self-media/raw/master/assets/img/201023/20201025221202.png)
**新增頁面**
![](https://gitee.com/zcqiand/self-media/raw/master/assets/img/201023/20201025221241.png)
**編輯頁面**
![](https://gitee.com/zcqiand/self-media/raw/master/assets/img/201023/20201025221329.png)
# 安裝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/