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

刻升
183 阅读3分钟

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

1. 介绍

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

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

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

2. 官网和文档

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

TinyVue的官网地址如下：

opentiny.design/tiny-vue/zh…

TinyVue官网

3. 使用TinyVue组件库

3.1 创建Vue项目

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

npm init vue

02.02.png

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

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可以看到我们的依赖和命令

02.03.png

在使用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

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

02.04.png

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

4. 结语

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

avatar
文章
阅读
粉丝