首页 > 其他分享 >新手适合用什么Vue组件库?TinyVue组件库好用吗?

新手适合用什么Vue组件库?TinyVue组件库好用吗?

时间:2023-04-15 18:38:39浏览次数:61  
标签:Vue TinyVue 如下 Ant vue3 组件

对于刚接触前端领域的同学,绕不开选择组件库的问题, 常见的 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

新手适合用什么Vue组件库?TinyVue组件库好用吗?_官网

接下来就是按照如上的三行命令敲入terminal中执行,结果如下图:

新手适合用什么Vue组件库?TinyVue组件库好用吗?_官网_02

接下来就是将 TinyVue中的组件安装后导入这个项目,

输入 npm i @opentiny/vue3

新手适合用什么Vue组件库?TinyVue组件库好用吗?_多语言_03

最后在 vscode 中打开这个项目并导入:

新手适合用什么Vue组件库?TinyVue组件库好用吗?_Vue_04

效果如下

新手适合用什么Vue组件库?TinyVue组件库好用吗?_Vue_05

整体感受下来还是很流畅的,在官网给出的多个组件示例中,API 的设计看起来也都友好合理。更多细节接下来一起共同探索吧。


标签:Vue,TinyVue,如下,Ant,vue3,组件
From: https://blog.51cto.com/u_16043281/6192389

相关文章

  • 利用AntDesign中a-tree和checkbox构造组织单位人员树选择组件
    业务效果图核心代码<template><divclass="select-container"><a-modalv-model:visible="visible"@ok="handleOk"@cancel="handleCancel"width="1500px"><template#title>......
  • 3.Vue3.0 有什么更新
    1.监测机制的改变3.0将带来基于代理Proxy的observer实现,提供全语言覆盖的反应性跟踪。消除了Vue2当中基于Object.defineProperty的实现所存在的很多限制。2.只能监测属性,不能监测对象检测属性的添加和删除;检测数组索引和长度的变更;支持Map、Set、WeakMap和Weak......
  • Vue3组合API自动引入插件
    插件名:unplugin-auto-importurl:https://github.com/antfu/unplugin-auto-import安装1、下载插件npmiunplugin-auto-import-D2、配置vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{defineConfig}from'vite'//引入插件,因为我使用的vite+ts,所以这里引......
  • vue自定义密码输入框解决浏览器自动填充密码的问题
    问题描述浏览器对于type="password"的输入框会自动填充密码,但有时出于安全或者其他原因,我们不希望浏览器记住并自动填充密码。通过网上查到的一些解决方案,可以总结出以下几种解决方案(主要用edge浏览器进行测试):通过autocomplete="off"/autocomplete="new-password"来关闭浏览......
  • vue-element-admin 动态菜单改造
    vue-element-admin动态菜单改造vue-element-admin是一款优秀后台前端解决方案,它基于vue和element-ui实现。开源后台管理系统解决方案项目Boot-admin的前端模块就是基于vue-element-admin开发而来。作为一款纯前端的后台界面解决方案,vue-element-admin是通过遍历路由进行渲......
  • vue 自定义季度选择器
    1、效果时间格式:2023-Q12、封装quarter-picker.vue<template><divclass="quarter-picker"><selectclass="year-select"v-model="year"@change="updateQuarter"><optionvalue=&......
  • vue 不同版本定义 el-date-picker 日期选择器快捷项
    1、效果2、vue2:picker-options<el-date-picker style="width:350px" v-model="dates" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-place......
  • vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')(转)
    原文:https://www.cnblogs.com/Bin-x/p/15342949.html1、错误说明vue3中,使用data的方式初始化echart图表exportdefault{data(){return{chart:null,...}},mounted(){this.chart=echarts.init(document.getElementById(this.id))......
  • vue3.2入门
    vue3.2版本开始可以使用语法糖!对于从2.0过来的人我就直接看3.2的语法了helloworld.vue<!--setup语法糖vue3.0的变量需要return出来才可以在template中使用,写法冗余vue3.2在script标签中添加setup解决问题组件只需要引入,不需要注册,属性方法不需要返回,不需要写setup......
  • CNStack 云服务&云组件:打造丰富的云原生技术中台生态
    作者:刘裕惺CNStack相关阅读:CNStack多集群服务:基于OCM打造完善的集群管理能力CNStack虚拟化服务:实现虚拟机和容器资源的共池管理CNStack云边协同平台:实现原生边缘竟能如此简单01前言CNStack2.0(以下简称CNStack)作为阿里云云原生最佳实践的输出载体,其目标是提供一个开......