vue sfc 的自定义块 vite 插件
有时候我们想要在单文件组件 SFC 内进行设置一些对象，但是写到 setup 中又太拥挤了。所以有了这个自定义块的插件 🤗🤗
- json 解析
- yaml 解析
pnpm i vite-plugin-vue-custom-blocks -D
# npm i vite-plugin-vue-custom-blocks -D
# yarn add vite-plugin-vue-custom-blocks -D// vite.config.ts 或者 vite.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import CustomBlocks from 'vite-plugin-vue-custom-blocks'
export default defineConfig({
plugins: [
Vue(),
CustomBlocks()
]
})import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import CustomBlocks from 'vite-plugin-vue-custom-blocks'
export default defineConfig({
plugins: [
Vue(),
CustomBlocks({
include: {
tags: ['custom-block'], // 标签名, 默认只解析 custom-block
langs: ['json', 'yaml'] // 允许的解析方式，默认支持 json 和 yaml 解析
}
})
]
})<script lang="ts" setup>
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"
const block = useCustomBlock()
console.log(block) // 将输出 { foo: 'bar' }
</script>
<template>Hello, world!!</template>
<style>
</style>
<custom-block lang="json">
{
"foo": "bar"
}
</custom-block><script lang="ts" setup>
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"
const block = useCustomBlock()
console.log(block) // 将输出 { foo: 'bar' }
</script>
<template>Hello, world!!</template>
<style>
</style>
<custom-block lang="yaml">
foo:
bar
</custom-block>Made with markthree
Published under MIT License.