README-CN.md

Vue Vine

• English README
• 贡献指南

创造另一种书写 Vue 组件的方式。

• NPM 版本： 
• VSCode 插件版本： 
• 要了解更多细节，请查看文档站： 

为什么做这样一个项目？

在社区中，有很多帖子讨论过希望有一个支持在单个文件中编写多个 Vue 组件的解决方案。Vue Vine 因此而生。

Vue Vine 旨在提供更多管理 Vue 组件的灵活性，它并不是要取代 Vue SFC，而是作为一种并行的解决方案。

下面是一个简单的示例预览：

项目 NPM 包总览

类别	包名	版本	简介
	@vue-vine/compiler		编译器
	@vue-vine/language-server		语言服务器
	@vue-vine/language-service		语言服务集成
	@vue-vine/vite-plugin		Vite 插件
	@vue-vine/eslint-parser		ESLint 自定义解析器
	@vue-vine/eslint-plugin		ESLint 插件
	@vue-vine/eslint-config		ESLint 配置
	@vue-vine/nuxt		Nuxt Module
	vue-vine-tsc		TypeScript CLI 检查器
	create-vue-vine		项目脚手架 CLI

安装

# 如果你还没有安装 `@antfu/ni`，我强烈建议你安装它。
ni -D vue-vine

在 vite.config.ts 中使用插件：

import { VineVitePlugin } from 'vue-vine/vite'

export default defineConfig({
  plugins: [
    // ...其他插件
    VineVitePlugin()
  ],
})

然后在 tsconfig.json 中添加宏的类型定义：

{
  "compilerOptions": {
    "types": ["vue-vine/macros"]
  }
}

对于 ESLint, 请安装我们提供的 ESLint 配置包：

ni -D @vue-vine/eslint-config

你需要将其载入到 ESLint flat configs 中。

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。

尝试示例

你可以按照下面的步骤操作，启动示例项目来预览：

首先，你需要获取 VSCode 插件的构建输出。

git clone https://github.com/vue-vine/vue-vine.git
cd vue-vine
pnpm install

# 构建所有包
pnpm run build

在构建完 VSCode 插件后，你可以在 VSCode 的 'Debug' 选项卡中找到 'Rune Vine Extension' 的配置项，然后点击运行。

然后，在另一个终端会话中开启 Playground 的 Vite 开发服务器。

pnpm run play

1. 接下来可以在 http://localhost:3333/ 中看到示例。
2. 你可以在 http://localhost:3333/__inspect/ 中查看源代码在 Vite 处理管道的转换过程。