首頁>技術>

超優秀 Vue3.0 開源UI元件庫

這段時間對於前端人來說，最大的驚喜莫過於期盼已久的Vue.js 3.0正式釋出了。

之前就有很多小夥伴詢問vue3元件庫相關的問題。趁著vue.js 3.0釋出的熱潮，就給大家推薦幾個Vue3 Beta元件庫。

效能方面優化

路由/圖片懶載入v-show複用dom長列表效能優化事件銷燬外掛按需引入無狀態元件標記為函式式元件變數本地化更好的TypeScript整合SSR... 
# vue3.0中文官網/file/2020/09/28/20200928200107_19.jpg 倉庫地址https://github.com/vuejs/vue-next

下面進入今天的正文。有哪些網際網路大廠率先推出自己的Vue3元件庫呢？

1、Vant 3.0

Vant有贊團隊推出的Vue移動端元件庫，已經完成併發布Vue3.0 beta版本。

安裝

# 通過 npm 安裝$ npm i vant@next -S# 通過 yarn 安裝$ yarn add vant@next

快速引入

// 全域性引入import { createApp } from 'vue'import Vant from 'vant'import 'vant/lib/index.css'const app = createApp()app.use(Vant)// 按需引入import { createApp } from 'vue'import { Button } from 'vant'const app = createApp()app.use(Button)

元件的使用和Vant 2.x沒多大區別，直接引入使用即可。

# 文件地址/file/2020/09/28/20200928200108_20.jpg 倉庫地址https://github.com/youzan/vant
2、Ant-Design-Vue

一款AntD設計風格的Vue實現。目前已經發布Vue 3.0 的 2.0.0 測試版。

安裝

$ npm i ant-design-vue@next -S

快速引入

# 完整引入import { createApp } from 'vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'const app = createApp()app.use(Antd)# 按需區域性引入import { createApp } from 'vue'import { Button, message } from 'ant-design-vue'const app = createApp()app.use(Button)app.config.globalProperties.$message = message

元件使用方式也和之前一樣。大家如果有開發Vue3專案計劃，可以去了解下。

# 文件地址/file/2020/09/28/20200928200109_21.jpg 倉庫地址https://github.com/vueComponent/ant-design-vue/
3、Element-Plus

element-ui風格的Vue3重構元件庫。目前還在緊急研發中，大家可以去了解下最新動態。

# 文件地址/file/2020/09/28/20200928200116_22.jpg UI元件庫，期待一起分享交流哈！
5024

TypeScript

最新評論
  • 1 #

    el plus 是個人在開發

  • 2 #

    相容性可不好，有些組建不能用

  • 3 #

    ele是團隊開發還是個人

  • ∧ BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • ∨ 搭建網站、APP 該怎麼選伺服器？