viso-design-vue

快速开始

viso-design-vue是 Viso UI 组件库，提供统一的 UI 组件，以便于快速开发业务系统。

安装

推荐使用 pnpm 的方式安装

npm install viso-design-vue
或
yarn add viso-design-vue
或
pnpm install viso-design-vue

引入

在 vue3 项目中，通过如下方式引入整个viso-design-vue：

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

// 引入 Viso UI组件库样式
import 'viso-design-vue/dist/style.css'
// 引入 Viso UI组件库
import VisoDesignVue from 'viso-design-vue'

const app = createApp(App)
app.use(VisoDesignVue)

app.mount('#app')

<template>
  <div>
    <div class="btn-wrapper btn-wrapper-m-5">
      <v-button type="primary">主色按钮</v-button>
      <v-button>默认按钮</v-button>
      <v-button type="dashed">虚线按钮</v-button>
      <v-button type="text">文本</v-button>
      <v-button type="link">链接</v-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.btn-wrapper {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
}
.btn-wrapper-m-5 {
  margin-bottom: 20px;
}
</style>

开始使用

至此，一个基于 Vue 和 viso-design-vue 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的示例文档。