View UI Plus简介

基于 Vue.js 3 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

文档

https://www.iviewui.com

在 InsCode 中在线体验

https://inscode.csdn.net/@aresn/ViewDesign

特性

• 丰富的组件和功能，满足绝大部分网站场景
• 提供开箱即用的 Admin 系统 和 快速增删改查 表格组件，极大程度节省开发成本
• 友好的 API ，自由灵活地使用空间
• 细致、漂亮的 UI
• 事无巨细的文档
• 可自定义主题

View UI Plus主要贡献者、开发者、作者

Name	Avatar	Name	Avatar	Name	Avatar
Aresn

View UI Plus License开源协议

MIT

Copyright © 2016-present, ViewDesign

项目地址

GitCode：https://gitcode.com/view-design/ViewUIPlus/overview
GitHub：https://github.com/view-design/ViewUIPlus

安装

我们推进您使用官方工具快速开始：

• View UI Plus Project (Based on Vue CLI)
• View UI Plus Project (Based on Vite)
• View UI Plus Project (Based on TypeScript)
• View UI Plus Project (Based on Nuxt)

安装 View UI Plus

使用 npm:

npm install view-ui-plus --save

或使用 <script> 全局引用：

<script type="text/javascript" src="viewuiplus.min.js"></script>
<link rel="stylesheet" href="dist/styles/viewuiplus.css">

您可以在官网文档查看更多详细说明。

示例

Options API：

<template>
    <Slider v-model="value" range />
</template>
<script setup>
    import { ref } from 'vue'
    const value = ref([20, 50])
</script>

Composition API：

<template>
    <Slider v-model="value" range />
</template>
<script setup>
    import { ref } from 'vue'
    const value = ref([20, 50])
</script>

TypeScript：

<template>
    <Slider v-model="value" range />
</template>
<script setup lang="ts">
    import { ref } from 'vue'
    import type { Ref } from 'vue'
    const value: Ref<number[]> = ref([20, 50])
</script>

使用 import 导入 CSS:

import 'view-ui-plus/dist/styles/viewuiplus.css'

社区

您可以免费加入到 ViewDesign 官方社区 了解更多 Vue 的内容。