https://github.com/vue-vine/vue-vine
Another style of writing Vue components.
https://github.com/vue-vine/vue-vine
Last synced: 29 days ago
JSON representation
Another style of writing Vue components.
- Host: GitHub
- URL: https://github.com/vue-vine/vue-vine
- Owner: vue-vine
- License: mit
- Created: 2023-05-26T08:09:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-01T01:52:53.000Z (about 1 month ago)
- Last Synced: 2025-04-03T17:28:05.223Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://vue-vine.dev
- Size: 4.49 MB
- Stars: 1,325
- Watchers: 11
- Forks: 63
- Open Issues: 0
-
Metadata Files:
- Readme: README-CN.md
- Contributing: CONTRIBUTING-zhCN.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - vue-vine/vue-vine - Another style of writing Vue components. (TypeScript)
- awesome - vue-vine/vue-vine - Another style of writing Vue components. (TypeScript)
README
# Vue Vine
- [English README](./README.md)
- [贡献指南](./CONTRIBUTING-zhCN.md)
创造另一种书写 Vue 组件的方式。
- NPM 版本： [](https://www.npmjs.com/package/vue-vine)
- VSCode 插件版本： [](https://marketplace.visualstudio.com/items?itemName=shenqingchuan.vue-vine-extension)
- Open VSX 插件版本: [](https://open-vsx.org/extension/shenqingchuan/vue-vine-extension)
- 要了解更多细节，请查看 [官方文档](https://vue-vine.dev)： [](https://app.netlify.com/sites/vue-vine/deploys)
为什么做这样一个项目？
在社区中，有很多帖子讨论过希望有一个支持在单个文件中编写多个 Vue 组件的解决方案。`Vue Vine` 因此而生。
`Vue Vine` 旨在提供更多管理 Vue 组件的灵活性，它并不是要取代 Vue SFC，而是作为一种并行的解决方案。
下面是一个简单的示例预览：
## 尝试示例
使用交互式命令(`create-vue-vine`)创建您的第一个项目。看这里: [项目启动模板](https://vue-vine.dev/zh/introduction/ecosystem.html#project-starter-template)
或者你可以在线上尝试: [Vue Vine Playground](https://stackblitz.com/~/github.com/vue-vine/stackblitz-playground)
## 项目 NPM 包总览
| 类别 | 包名 | 版本 | 简介 |
| --- | --- | --- | --- |
|  | [@vue-vine/compiler](./packages/compiler) | [](https://www.npmjs.com/package/@vue-vine/compiler) | 编译器 |
|  | [@vue-vine/language-server](./packages/language-server) | [](https://www.npmjs.com/package/@vue-vine/language-server) | 语言服务器 |
|  | [@vue-vine/language-service](./packages/language-service) | [](https://www.npmjs.com/package/@vue-vine/language-service) | 语言服务集成 |
|  | [@vue-vine/vite-plugin](./packages/vite-plugin) | [](https://www.npmjs.com/package/@vue-vine/vite-plugin) | Vite 插件 |
|  | [@vue-vine/eslint-parser](./packages/eslint-parser) | [](https://www.npmjs.com/package/@vue-vine/eslint-parser) | ESLint 自定义解析器 |
|  | [@vue-vine/eslint-plugin](./packages/eslint-plugin) | [](https://www.npmjs.com/package/@vue-vine/eslint-plugin) | ESLint 插件 |
|  | [@vue-vine/eslint-config](./packages/eslint-config) | [](https://www.npmjs.com/package/@vue-vine/eslint-config) | ESLint 配置 |
|  | [@vue-vine/nuxt](./packages/nuxt-module) | [](https://www.npmjs.com/package/@vue-vine/nuxt) | Nuxt Module |
|  | [vue-vine-tsc](./packages/tsc) | [](https://www.npmjs.com/package/vue-vine-tsc) | TypeScript CLI 检查器 |
|  | [create-vue-vine](./packages/create-vue-vine) | [](https://www.npmjs.com/package/create-vue-vine) | 项目脚手架 CLI |
## 安装
```bash
# 如果你还没有安装 `@antfu/ni`，我强烈建议你安装它。
ni -D vue-vine
```
在 `vite.config.ts` 中使用插件：
```ts
import { VineVitePlugin } from 'vue-vine/vite'
export default defineConfig({
plugins: [
// ...其他插件
VineVitePlugin()
],
})
```
然后在 `tsconfig.json` 中添加宏的类型定义：
```json
{
"compilerOptions": {
"types": ["vue-vine/macros"]
}
}
```
对于 ESLint, 请安装我们提供的 ESLint 配置包：
```bash
ni -D @vue-vine/eslint-config
```
你需要将其载入到 ESLint flat configs 中。
```js
import antfu from '@antfu/eslint-config'
// `VueVine()` 返回了一个 ESLint flat config
import VueVine from '@vue-vine/eslint-config'
export default antfu(
{
// 第一个选项对象不是 ESLint 的 FlatConfig
// 是 antfu 规则自身的配置
},
...VueVine(),
)
```
最后，安装 VSCode 插件，在市场中搜索 `Vue Vine`。
