Vue开发效率神器TinyVue组件库：一套代码搞定PC/移动端！

哈喽大家好！我是小墨，本期想跟大家聊聊最近发现的一个Vue组件库新秀——TinyVue。现在市面上Vue组件库虽然很多，但能同时兼顾Vue 2/3，还能一套代码适配PC和移动端的，TinyVue必须拥有姓名！关键它还是国产的，必须支持一波！

TinyVue 初探：简洁、高效、跨平台

TinyVue定位是企业级UI组件库，内置了100+个组件，涵盖了日常开发的各种场景。它最大的亮点就在于“跨端、跨框架”，一份代码就能在Vue 2/3和PC/移动端跑起来，省时省力，开发效率直接起飞！对于经常要切换不同平台开发的同学来说，TinyVue绝对是你的救星！

TinyVue的独门秘籍：省时、省力、省心

TinyVue究竟有哪些让人眼前一亮的特点呢？一起来瞧瞧：

•跨端兼容性：之前做项目最痛苦的就是维护多套代码，TinyVue完美解决了这个痛点！一套代码搞定所有平台，再也不用担心兼容性问题啦~

•丰富的组件库：100+常用组件，Button、Input、Select、Table应有尽有，满足你的各种开发需求，再也不用为找组件而烦恼了！

•简单易上手：TinyVue的API设计简洁明了，文档也写得非常详细，新手也能轻松上手，快速集成到项目中。

•灵活的主题定制：TinyVue支持主题定制，可以根据项目需求调整UI风格，打造个性化界面。

TinyVue实战操练：代码示例带你飞

安装TinyVue非常简单，用npm或者yarn都可以：

# Vue.js 3

npm i @opentiny/vue@3

# Vue.js 2

npm i @opentiny/vue@2

安装完之后，在Vue项目中引入需要的组件：

<tiny-button type="primary">点我试试</tiny-button>

import { Button as TinyButton } from '@opentiny/vue';

export default {

components: {

TinyButton,

},

};

是不是超级简单？几行代码就能搞定！

下面以表格组件为例，让大家更直观地感受TinyVue的魅力：

<tiny-grid :data="tableData" :columns="tableColumns"></tiny-grid>

import { Grid as TinyGrid } from '@opentiny/vue';

export default {

components: { TinyGrid },

data() {

return {

tableData: [

{ id: 1, name: '小墨', age: 18 },

{ id: 2, name: '小红', age: 20 },

],

tableColumns: [

{ field: 'id', title: 'ID' },

{ field: 'name', title: '姓名' },

{ field: 'age', title: '年龄' },

],

};

},

};

**传送门 **

你用过哪些好用的Vue组件库呢？在评论区分享一下你的使用体验吧，一起交流学习呀~