教你三分钟上手TinyVue开源组件库

TinyVue 开源地址：github.com/opentiny/ti…

🌈 特性：

• 📦 包含 69 个简洁、易用、功能强大的组件

• 🖖 一套代码同时支持 Vue 2 和 Vue 3

• 🖥️ 一套代码同时支持 PC 端和移动端

• 🌍 支持国际化

• 🎨 支持主题定制

• 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置

• 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性

第一步： 新建一个Vue工程

第二步：安装TinyVue

npm i @opentiny/vue@3
// 如果是vue2项目
npm i @opentiny/vue@2

修改vite.config.ts配置项：

export default defineConfig({  

    plugins: [vue(), vueJsx()],  
    resolve: {    
        alias: {      
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }    
    },
    define: { 
       'process.env': { ...process.env }  
    }
})

这样就安装好啦 ~

第三步 ： 引用

<template>  
    <tiny-button-group
        :data="groupData" 
        :show-more="3"
        :show-edit="true"
        v-model="checkedVal"
    ></tiny-button-group> 
</template>
<script>
import { ButtonGroup } from '@opentiny/vue'
export default {  
    components: {    TinyButtonGroup: ButtonGroup  },  
    data() {    
        return {      
            checkedVal: 'Button1',
            groupData: [
                { text: 'Button1', value: 'Button1' },
                { text: 'Button2', value: 'Button2' }, 
                { text: 'Button3', value: 'Button3' },
                { text: 'Button4', value: 'Button4' },
                { text: 'Button5', value: 'Button5' } 
             ]    
        }  
    }
}
</script>

就可以正常使用啦 ~

--------------

联系我们

如果你对我们 OpenTiny 的开源项目感兴趣，欢迎添加小助手微信：opentiny-official，拉你进群，一起交流前端技术，一起玩开源。

OpenTiny 官网：opentiny.design/

OpenTiny 代码仓库：github.com/opentiny/

Vue 组件库：github.com/opentiny/ti…（欢迎 Star 🌟）

Angular 组件库：github.com/opentiny/ng（欢迎 Star 🌟）