推荐一款适用于Vue项目的UI组件库——TinyVue

1. 介绍

Vue 是一款十分受欢迎的前端框架，和 React、Angular 合在一起被称为前端三大框架，尤其是国内，大大小小的团队都在使用 Vue 开发他们的页面。提到前端开发就不得不提UI组件库，UI 组件库帮我们写好了搭建一个页面需要的基本元素，例如按钮、表单、表格、菜单、导航、弹窗等等。然后我们就可以根据自己的业务需要，像搭积木一样使用组件库搭建出自己的页面。

最近听说了一个新的开源项目 Opentiny，它是华为云的前端团队贡献的一套组件库系统，包含了适用于 Vue 技术栈的 TinyVue 组件库，和适用于 Angular 技术栈的 TinyNg 组件库。目前华为云的控制台页面就是使用 Opentiny 搭建，这是一套经历了实际业务考验的组件库，如果我们也想搭建向华为云控制台一样的页面，不放也可以试试这套 Opentiny 组件库。

鉴于国内大部分的前端开发者都是以 Vue 学习为主，所以今天我们就上手试试 TinyVue，看看怎么样。

2. 官网和文档

上手一款组件库，最直接的方法就是去它的官网，一个合格的官网会直接告诉我们如何在我们的项目中安装他们的组件库，如何引入和使用。此外还有每个组件的使用示例和详细的 API 文档。

TinyVue 的官网地址如下：

https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/envprepa...

3. 使用TinyVue组件库

3.1 创建Vue项目

现在我们手里有了 TinyVue 的文档，下面就可以试试使用它了。首先我们创建一个 Vue 项目

npm init vue

进入项目目录，然后安装依赖

cd tiny-vue-test
npm install

3.2 安装TinyVue

首先安装 TinyVue 包，TinyVue 支持 vue2 和 vue3 ，根据我们的项目需要选择对应的版本，这里使用 vue3，所以安装 @opentiny/vue@3，命令如下

npm install @opentiny/vue@3 -S

安装完成后使用 IDE 打开项目，这里我是用 VSCode，执行如下命令

code .

如图，打开 package.json 可以看到我们的依赖和命令

在使用 TinyVue 之前需要做一些准备工作，打开 vite.config.ts，添加如下代码

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
+  define: {
+   'process.env': { ...process.env }
+  }
})

3.3 使用TinyVue组件

我们用 TinyVue 搭一个简单的表单

首先进入 src，删除 src 下面的所有内容，然后创建一个 main.ts 和 App.vue

main.ts

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app')

App.vue

<template>
  <h2>欢迎使用，请登录</h2>
  <Form style="width: 400px;">
    <FormItem label="用户名">
      <Input v-model="username"></Input>
    </FormItem>
    <FormItem label="密码">
      <Input v-model="password" type="password"></Input>
    </FormItem>
    <FormItem>
      <Button @click="login">登录</Button>
    </FormItem>
  </Form>
</template>

<script lang="ts">
import { Button, Input, Form, FormItem } from '@opentiny/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    Button,
    Input,
    Form,
    FormItem
  },
  setup() {
    const username = ref('');
    const password = ref('');
    const login = () => {
      alert(`用户名：${username.value}, 密码：${password.value}`);
    }
    return { username, password, login };
  }
})

</script>

3.4 运行项目

简单写了一个表单后，在控制台执行

npm run dev

然后在浏览器中可以看到效果

是不是很简单，通过翻阅TinyVue的文档我们还可以使用更多的组件，快速完成页面的搭建。

4. 结语

今天给大家推荐了 TinyVue 这款组件库，教了一下 TinyVue 怎么使用，总的来说，它的文档全面，组件丰富，容易上手，非常适合用来开发一些管理系统的中后台页面，如果你有幸看到这篇文章不妨去尝试尝试吧。