快速开始

本节将介绍如何在项目中使用Very Plus。

按需引入

需要哪些组件导入哪些

import Icon from '@very-plus/components/icon'
import Tree from '@very-plus/components/tree'
import Checkbox from '@very-plus/components/checkbox'
import Button from '@very-plus/components/button'
import Input from '@very-plus/components/input'
import { FormItem, Form } from '@very-plus/components/Form'
import Upload from '@very-plus/components/upload'
import Divider from '@very-plus/components/divider'
import Calendar from '@very-plus/components/calendar'
import Watermark from '@very-plus/components/watermark'
import ColorPicker from '@very-plus/components/color-picker'
import VirtualScrollList from '@very-plus/components/virtual-scroll-list'
import '@very-plus/theme-chalk/src/index.scss'

const plugins = [
  Icon,
  Tree,
  Checkbox,
  Button,
  Input,
  FormItem,
  Form,
  Upload,
  Divider,
  Calendar,
  Watermark,
  ColorPicker,
  VirtualScrollList
]
const app = createApp(App)
plugins.forEach(plugin => app.use(plugin))

app.mount('#app')

实际使用

<script setup lang="ts">
import { ref } from 'vue';

const color1 = ref('#007DFF')
const currentDate = ref(new Date())
</script>

<template>
  <vt-color-picker
    v-model="color1"
  >
  </vt-color-picker>
  <vt-watermark>
    <div style="height: 500px" />
  </vt-watermark>
  <vt-calendar v-model="currentDate">
  </vt-calendar>
  <vt-divider></vt-divider>
</template>