jer-code-preview

一个基于 Vite + Vue 3 的轻量代码预览组件库。

安装

npm i jer-code-preview
# 或者
pnpm add jer-code-preview
# 或者
yarn add jer-code-preview

使用

按需引入：

import { Preview } from 'jer-code-preview'
import 'jer-code-preview/style.css'

或作为插件安装：

import { createApp } from 'vue'
import PreviewPlugin from 'jer-code-preview'
import 'jer-code-preview/style.css'
const app = createApp(App)
app.use(PreviewPlugin)
app.mount('#app')

在组件中：

<script setup lang="ts">
import { Preview } from 'jer-code-preview'
import 'jer-code-preview/style.css'
const codeList = [
  { filename: 'button.vue', code: '<template>\\n  <button>OK</button>\\n</template>' },
  { filename: 'utils.ts', code: 'export const add = (a:number, b:number)=>a+b' }
]
</script>

<template>
  <Preview :codeList="codeList" />
</template>

Props

• codeList: { filename: string; code: string }[]

开发 & 构建

# 本地开发
npm run dev

# 构建库（含类型）
npm run build

注意：该库将 vue 声明为 peerDependencies，请确保宿主项目安装了兼容版本的 vue@^3.3。

许可证

MIT