主流組件庫(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
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. 使用自定義主題
- import引入對(duì)應(yīng)css文件即可
- 搭配
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-import
的customStyleName
偎血,配置主題包,進(jìn)行按需加載組件和對(duì)應(yīng)樣式文件
第三方庫(kù)或自研
- 自研需要大量的人力成本和時(shí)間成本盯漂,需要考慮后期的長(zhǎng)期維護(hù)和穩(wěn)定性
- 第三方庫(kù)考慮其穩(wěn)定性和維護(hù)性颇玷,可開(kāi)發(fā)自定義主題進(jìn)行定制化開(kāi)發(fā)