https://github.com/dishait/vite-plugin-vue-custom-blocks
vue sfc 的自定义块 vite 插件
https://github.com/dishait/vite-plugin-vue-custom-blocks
custom-blocks plugin sfc vite vue
Last synced: about 1 year ago
JSON representation
vue sfc 的自定义块 vite 插件
- Host: GitHub
- URL: https://github.com/dishait/vite-plugin-vue-custom-blocks
- Owner: dishait
- License: mit
- Created: 2022-02-12T13:32:01.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T08:39:17.000Z (over 2 years ago)
- Last Synced: 2025-04-19T08:50:30.486Z (about 1 year ago)
- Topics: custom-blocks, plugin, sfc, vite, vue
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-vue-custom-blocks
vue sfc 的自定义块 `vite` 插件
## Motivation 🐇
有时候我们想要在单文件组件 `SFC` 内进行设置一些对象，但是写到 `setup` 中又太拥挤了。所以有了这个自定义块的插件 🤗🤗
## Features 🦖
- json 解析
- yaml 解析
## 使用 🦕
### 安装
```shell
pnpm i vite-plugin-vue-custom-blocks -D
# npm i vite-plugin-vue-custom-blocks -D
# yarn add vite-plugin-vue-custom-blocks -D
```
### 配置插件
```ts
// 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()
]
})
```
#### 具体配置
```ts
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 解析
}
})
]
})
```
### `SFC` 模板中
#### json 解析
```html
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"
const block = useCustomBlock()
console.log(block) // 将输出 { foo: 'bar' }
Hello, world!!
{
"foo": "bar"
}
```
#### yaml 解析
```html
import { useCustomBlock } from "vite-plugin-vue-custom-blocks"
const block = useCustomBlock()
console.log(block) // 将输出 { foo: 'bar' }
Hello, world!!
foo:
bar
```
## License
Made with markthree
Published under [MIT License](./LICENSE).