前端组件库的正确打开方式是啥，为啥我怎么写都感觉不舒服。。。

[FlyingBackscratc]

我从学前端开始到现在，不算是专业前端吧，但是也写了不少项目了，因为很多东西基本都要带个 UI ，场景还是挺多的。但是组件库真的是怎么用怎么感觉不舒服，是我野路子没用对还是怎么回事。。。

比如 element plus 这种用 vue 写的组件库，首先是用不用，那必须用，不用人家设计好的组件库，我自己写一个按钮都写不出好看的。但是三方库感觉经常遇到互相干扰，比如装了 tailwindcss 以后 elementplus 有些效果就不好使了，说实话我也不知道怎么回事，vue 里面样式这种东西不应该都是隔离的么？为什么会互相影响？

再比如网页布局问题。一般组件库，像 elementplus 或者 vuetify 这种自己都会提供一个布局框架，但是都不好用，最主要的问题是灵活度不够。我自己写的过程中的感觉就是，如果我自己用 vanilla 的 css 新建布局，那不管是用哪种 position ，或者弹性盒子，我都感觉到自己对组件的灵活性有 100%的掌控力度。但是用框架提供的布局感觉传导问题就很严重了，想要的效果经常达不到，不管是用插槽还是提供的 api ，很多莫名其妙的传导问题。

是我用的不对，还是第三方库有问题？还是 vue 有问题？还是我该去学 react 就没这些事了。。。

[Foxii]

首先排除 vue 的问题。tailwind 和其他组件库结合会出问题是因为它引入了一层略微修改浏览器默认行为的通用样式表，是全局生效的（如 css *或者 div 选择器），组件库如果没有专门适配自然会出现很多小毛病。这和 vue 的组件 scoped 样式一点关系没有，vue 想管也管不到。其次剩下那些说白了你就是觉得组件库灵活度不够高，仅此而已。现在和原子化 css 配合良好的是无样式组件库，可以看看 prime vue 的 styless 版本，或者 headless ui 。手机打的可能有拼写错误，见谅

[LandCruiser]

心态问题，spring 也不会帮你解决所有问题，服务端也会有冲突的情况，只是你心态变化了。

[zhonghao01]

“比如装了 tailwindcss 以后 elementplus 有些效果就不好使了，说实话我也不知道怎么回事”
这个 1l 说了问题所在，其实一般 ui 库都有说明跟 tailwind 的冲突怎么解决，可能你没看，可能 ele 没写，不用 ele 不清楚。

“像 elementplus 或者 vuetify 这种自己都会提供一个布局框架，但是都不好用，最主要的问题是灵活度不够”
UI 库只是给你提供一个选择，并不是强制你所有东西都是用它提供的，你觉得不好用可以不使用那个组件，另外 UI 组件库是是针对大众的，不是针对某个细分人群的需求，所以要学会取舍。

“还是 vue 有问题？还是我该去学 react 就没这些事了”
跟框架没什么关系。

[jguo]

因为你用的这个属于类 antd 的重型组件库。这类组件库的特点是 highly opinionated ，功能复杂可定制程度低且排他性很强。一般来说对个性化要求不高更注重业务逻辑的后台项目才会用重型组件库。

[wujianhua22]

想要自定义程度高一点就不要使用 antd 、ele 这种，可以选择 shadcn 这种和 tailwind 高度契合的组件库

[cheneydog]

就是 UI 组件库不能在一个项目内混用。
以一个 UI 为主，全局使用；个别组件非要用别的 UI ，就不要全局引用，样式有偏差的，也内部封装调整下。

[abelmakihara]

布局框架不好用就不用呗 全用基本都是内部项目后台项目吧..
toC 的很多引个组件库就用个 dialog popup form 这种吧 然后还要覆盖样式

[BeiChuanAlex]

用了任何框架就没有自由了，你只能按照别人的思路写。

[chicbian]

不要全局引入，不要全局引入，不要全局引入。
也别写全局的组件 deep 样式。
我因为做可视化，一个项目 3-4 三方库，也没这事情。
如果你是写 Java 的，应该熟读设计模式，按照设计模式的六大原则来使用组件，我个人觉得是最优解，特别是单一和开闭原则。

[crocoBaby]

框架就是用条条框框限制你的..

[Torpedo]

那就是你组件库选的质量不行。理论上组件库只有特殊场景才会样式冲突。组件库应该保持自己的样式不被别的组件库样式覆盖

[iOCZS]

框架就是用条条框框限制你的..
如果你要自由，就不要用，熵不会消失，只会转化。当你消除混乱的同时，也在增加束缚。

[duan602728596]

只引用 Utilities 不就得了

[gouflv]

vue 的组件库主打就是易上手，难定制

[northquq]

tailwindcss 这种比较适合用 headless ，daisy.ui 这种，不带样式的组件库

[ShuWei]

只用一套吧，尽量别混用，我跟 op 情况差不多，基本上就怼着一个组件库用，一开始会遇到一些不够灵活、满足不了需求之类的场景，自己用久了，慢慢的积累了一些自己二次封装的组件，也就越用越顺了

[djkloop]

shadcn/ui 其它重点的组件直接找对应的库就好了

[djkloop]

@djkloop https://www.shadcn-vue.com/ vue 版本。几乎不绑定 ui 库。代码都是可以手动改的。不爽可以随便换样式。

[ebushicao]

遇到组件库和 tailwindcss 互相干扰可以先去查查有没有人提过这个问题，最后又采用了什么解决方案。然后既然用一个组件库不一定就要全用那个组件库的东西，布局这块完全可以自己处理。

[FlyingBackscratc]

@djkloop
@wujianhua22 看了看这个库感觉有点太简陋了，按钮按下去的动画都没有这和我自己写的有啥区别。。。

[djkloop]

@FlyingBackscratc 要什么动画。。。99%的需求都是对动画追求 0... 扣这点细节不如打磨好业务，如果真的想要动画 完全可以自己安装完后 自己加就是了...它本身就会写到你的项目里，又不像其它 ui 库给你一套重的不行的组件。一个 button 组件恨不得源码干 1-2 千行...反正算是取舍问题吧，又想大而全，又想灵活多变，太难了。

[FlyingBackscratc]

@djkloop 不是大而全，主要是做个带点击动画的按钮对于组件库来说是个挺高的要求么。。。其他的也不太用得上啊，但是哪个网站不用按钮的，那神了。。

[djkloop]

@FlyingBackscratc #22 算了，搞不懂你的需求。shaduc/ui 本身就是提供最基本的组件，剩下的可以安装完自己魔改，别把它看做 ui 库就好了。它也不是 ui 库。就是一堆 tailwindcss 样式，至于你说的想要精致一点的可以看看 nextui 这种... 最后在一下，网站用按钮和网站用带动画的按钮两件事。对于一些官网和管理后台只要保证 disabled/hover/loading/outine/active 有个动画足够应付 99%场景了。

[FlyingBackscratc]

@djkloop 能魔改倒是好事，我的意思是你别照最简单需求设定，着你想的我写一个东西给别人用能实现最简单的场景就行了，那有啥生产价值，不是学 vue 和用 tailwind 的就全是写后台的吧。。。我想写个前台然后想找别人已经开源的工作这很罪恶？

[Hilong]

看你问的这个问题，你连前端都还没怎么入门，怎么能说出来你技术还可以的，放下幻想，先找个小公司边干活边入行吧

[FlyingBackscratc]

@Hilong 你这纯搞笑了，我为什么要前端入门，我 tm 也不是学前端的，也不是写前端的啊