关于前端:推荐一款适用于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 怎么应用，总的来说，它的文档全面，组件丰盛，容易上手，非常适合用来开发一些管理系统的中后盾页面，如果你有幸看到这篇文章无妨去尝试尝试吧。