对于刚接触前端领域的同学,绕不开选择组件库的问题, 常见的 Vue组件库如下:
Vuetify 组件库。一个纯手工精心打造的 Material 样式的组件库。文档全,但是纯英文的官网还是会让一些同学望而却步。2016 年发布。
Ant-design-vue 组件库。Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,风格俏皮简约,更适合用过 ant design 的 react 框架组件库的童鞋。2018 年发布。
ElementUI。常规支持:多语言、自定义主题、按需引入、内置过渡动画 ,文档详细,组件齐全。2016 年发布。
TinyVue组件库。开箱即用的多语言组件库,支持单独配置和升级,Vue2 和 Vue3 都适配。2023 年发布。
相较于前面几个稳定且备受好评的组件库,TinyVue 作为一个刚出来的前端组件库是否好用呢?最近 TinyVue组件库的热度也是持续上升,怀揣着这个疑问,作为新手的我便尝试了一下使用这个组件库。 首先我们新建一个Vue3的项目,具体的操作如下
输入 npm creat vite vue3-demo
选择 Vue 框架
选择 TypeScript 语言(个人更推荐大家使用TS代替JS,带类型的代码更加清晰而且便于维护) 如下图,当出现
Done,Now run:
cd vue3-demo
npm install
npm run dev
接下来就是按照如上的三行命令敲入terminal中执行,结果如下图:
接下来就是将 TinyVue中的组件安装后导入这个项目,
输入 npm i @opentiny/vue3
最后在 vscode 中打开这个项目并导入:
效果如下
整体感受下来还是很流畅的,在官网给出的多个组件示例中,API 的设计看起来也都友好合理。更多细节接下来一起共同探索吧。