Vue UI組件庫(kù)對(duì)比與選擇

主流組件庫(kù)對(duì)比

PC端

UI組件庫(kù)名 github star 是否可自定義主題 是否支持vue3 發(fā)布時(shí)間 穩(wěn)定性 貢獻(xiàn)者
ElementUI 49.3k 可自定義 支持任连,beta版本时捌,3版本官網(wǎng)3版本github 2016-08壁熄,4年半 長(zhǎng)期支持醉旦,最新兩個(gè)版本間隔時(shí)間1個(gè)半月 餓了么
Vuetify 29.7k 可自定義 開(kāi)發(fā)階段,計(jì)劃2021Q3發(fā)布 2016-12,4年3個(gè)月 長(zhǎng)期支持烟阐,更新頻率為半個(gè)月 Vuetify公司
iview/View UI 23.7k 可自定義 不支持 2017-02,4年 長(zhǎng)期支持紊扬,更新頻率為3個(gè)月 北京視圖更新科技有限公司
Ant Design 13.8k 可自定義 支持蜒茄,3版本 2018-04,3年 長(zhǎng)期支持餐屎,更新頻率為半個(gè)月 螞蟻金服
Veui 789 可自定義 不支持 2017-07檀葛,3年半 長(zhǎng)期支持,更新頻率為半個(gè)月 百度

移動(dòng)端

UI組件庫(kù)名 github star 是否可自定義主題 是否支持vue3 發(fā)布時(shí)間 穩(wěn)定性 貢獻(xiàn)者
Vant 16.8k 可自定義 支持3版本 2017-04腹缩,4年 長(zhǎng)期支持屿聋,更新頻率為半個(gè)月 有贊前端團(tuán)隊(duì)
cube ui 8.6k 可自定義 不支持 2017-11空扎,3年3個(gè)月 暫無(wú)維護(hù),最后發(fā)布時(shí)間為2020-04 滴滴
mint-ui 16.3k 暫不支持 不支持 2016-09润讥,4年半 暫無(wú)維護(hù)转锈,最后發(fā)布時(shí)間為2017-04 餓了么前端團(tuán)隊(duì)
vux 17.4k 可簡(jiǎn)單配置 不支持 2016-03,5年 暫無(wú)維護(hù)楚殿,最后發(fā)布時(shí)間為2019-04 個(gè)人

重點(diǎn)介紹『定制主題』

組件選擇過(guò)程中撮慨,由于業(yè)務(wù)的不同,是否可自定義主題顯得尤為重要脆粥。
此part重點(diǎn)介紹支持vue3的組件的主題定制功能砌溺。

ElementUI

demo地址

1. 僅替換主題色

在線主題生成工具生成對(duì)應(yīng)顏色主題,下載主題变隔,將樣式文件加入到項(xiàng)目中规伐,在引入element的地方引入樣式文件即可

import '@/assets/style/theme/index.css'

2. 改變 SCSS 變量

在項(xiàng)目中改變 Element Plus 的樣式變量。新建一個(gè)SCSS樣式文件弟胀,例如 element-variables.scss

3. 命令行主題工具

安裝element-theme,element-theme-chalk,通過(guò)et調(diào)用工具楷力,執(zhí)行-i初始化變量文件,生成變量文件element-variables.scss孵户。

修改對(duì)象變量后萧朝,編譯主題,將主題編譯輸出到指定目錄夏哭。使用自定義主題的方式進(jìn)行引入使用检柬。

4. 使用自定義主題

  1. import引入對(duì)應(yīng)css文件即可
  2. 搭配babel-plugin-component插件按需引入組件主題
    babel-plugin-import和babel-plugin-component的區(qū)別
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',
        styleLibraryName: '~src/theme' // 本地樣式目錄
      }
    ]
  ]
}

或搭配babel-plugin-import插件按需引入組件主題

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'element-plus',
      libraryDirectory: 'es',
      customStyleName: name => {
        return `theme/${name}.less`
      }
    }, 'element-plus']
  ]
}

Ant design

1. 通過(guò)modifyVars來(lái)覆蓋less變量

加載在less文件的底部,會(huì)覆蓋之前定義的變量

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 更改變量
          modifyVars: {
            'blue-base': '#1DA57A',
            'primary-color': '#1DA57A'
            'border-radius-base': '3px'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

2. 配置less文件

引入單獨(dú)變量文件竖配,覆蓋之前的變量

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口文件
@import 'your-theme-file.less'; // 用于覆蓋上面定義的變量

3. 自定義主題包

新建主題包何址,發(fā)布到npm上,通過(guò)npm install的方式引用
主題包目錄:

- theme
    - alert.less
    - button.less
    - ....組件對(duì)應(yīng)less文件

發(fā)布theme包到npm

引用主題包:

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        // 自定義樣式包
        customStyleName: name => {
          // theme為自定義主題包名进胯,按需加載對(duì)應(yīng)組件樣式
          return `theme/${name}.less`
        }
      }
    ]
  ]
}

Vant

1. 通過(guò)modifyVars來(lái)覆蓋less變量

加載在less文件的底部用爪,會(huì)覆蓋之前定義的變量
vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 更改變量
          modifyVars: {
            // 直接覆蓋變量
            'button-primary-background-color': 'red',
            'text-color': '#111',
            'border-color': '#eee'
            // 或者可以通過(guò) less 文件覆蓋(文件路徑為絕對(duì)路徑)
            hack: 'true; @import "@/theme/variables.less";'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

2. 自定義主題包

新建主題包,發(fā)布到npm上胁镐,通過(guò)npm install的方式引用
主題包目錄:

- theme
    - alert.less
    - button.less
    - ....組件對(duì)應(yīng)less文件

發(fā)布theme包到npm

引用主題包:

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: (name) => `${name}/style/less`
      customStyleName: name => {
        return `theme/${name}.less`
      }
    }, 'vant']
  ]
}

總結(jié)

均可通過(guò)babel-plugin-importcustomStyleName偎血,配置主題包,進(jìn)行按需加載組件和對(duì)應(yīng)樣式文件

第三方庫(kù)或自研

  • 自研需要大量的人力成本和時(shí)間成本盯漂,需要考慮后期的長(zhǎng)期維護(hù)和穩(wěn)定性
  • 第三方庫(kù)考慮其穩(wěn)定性和維護(hù)性颇玷,可開(kāi)發(fā)自定義主題進(jìn)行定制化開(kāi)發(fā)

參考文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市就缆,隨后出現(xiàn)的幾起案子帖渠,更是在濱河造成了極大的恐慌,老刑警劉巖竭宰,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件空郊,死亡現(xiàn)場(chǎng)離奇詭異份招,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)狞甚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)脾还,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人入愧,你說(shuō)我怎么就攤上這事鄙漏。” “怎么了棺蛛?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵怔蚌,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我旁赊,道長(zhǎng)桦踊,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任终畅,我火速辦了婚禮籍胯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘离福。我一直安慰自己杖狼,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布妖爷。 她就那樣靜靜地躺著蝶涩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪絮识。 梳的紋絲不亂的頭發(fā)上绿聘,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音次舌,去河邊找鬼熄攘。 笑死,一個(gè)胖子當(dāng)著我的面吹牛彼念,可吹牛的內(nèi)容都是我干的挪圾。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼国拇,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼洛史!你這毒婦竟也來(lái)了惯殊?” 一聲冷哼從身側(cè)響起酱吝,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎土思,沒(méi)想到半個(gè)月后务热,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體忆嗜,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年崎岂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了捆毫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冲甘,死狀恐怖绩卤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情江醇,我是刑警寧澤濒憋,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站陶夜,受9級(jí)特大地震影響凛驮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜条辟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一黔夭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧羽嫡,春花似錦本姥、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至颜屠,卻和暖如春辰妙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甫窟。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工密浑, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人粗井。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓尔破,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親浇衬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子懒构,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361