VitePress

Appearance

On this page

组件演示 ​

概要 ​

本项目基于vite + vue3 + vitepress + typescript，无论你是制作一般的工具包，还是UI组件，都将是得心应手。

  1. 所见即所得的文档演示： https://vitepress.dev/guide/what-is-vitepress
  2. 开箱即用的 tailwindcss： https://tailwindcss.com/docs
  3. 支持typescript 、vue 组件开发
  4. 打包支持类型推断，兼容commonjs 和 es

通过预览组件配置 ​

左边
右边
演示
巴拉巴拉巴拉
<template>
    <div class=" flex justify-between bg-green-300">
        <div>左边</div>
        <div>右边</div>
    </div>
</template>
<script setup lang="ts">
defineProps<{
    name: string
}>()
</script>
<template>
    <div class=" flex justify-between bg-green-300">
        <div>左边</div>
        <div>右边</div>
    </div>
</template>
<script setup lang="ts">
defineProps<{
    name: string
}>()
</script>

通过传统的方式引入 ​

左边
右边

演示
巴拉巴拉巴拉
<template>
    <div class=" flex justify-between bg-green-300">
        <div>左边</div>
        <div>右边</div>
    </div>
</template>
<script setup lang="ts">
defineProps<{
    name: string
}>()
</script>
<template>
    <div class=" flex justify-between bg-green-300">
        <div>左边</div>
        <div>右边</div>
    </div>
</template>
<script setup lang="ts">
defineProps<{
    name: string
}>()
</script>