周边生态

除了 Vite 插件和 VSCode 扩展，Vine 还提供了一些你可能需要的其他库。

自定义 ESLint 解析器

因为我们为 .vine.ts 定义了一种新的语法，即将标记模板字符串作为 Vue 模板，我们需要一个自定义的 ESLint 解析器来使 ESLint 正常工作。如果你对内部实现感兴趣，可以查看源代码。简而言之，它将用 Vue 模板根节点替换标记模板字符串的 ESTree 节点。

我们还没有为 Vue Vine 提供任何特定的 ESLint 规则，但它应该可以与大多数现有的规则预设一起工作，比如 @antfu/eslint-config、@sxzz/eslint-config 等。

但样式相关的规则尚未完全支持：

• ESLint-Stylistics 会因为一些未知问题无法格式化模板
• eslint-plugin-prettier 运行起来似乎没问题，但并也没有怎么对模板部分做格式化

要配置自定义解析器，请运行以下命令安装包：

pnpm i -D @vue-vine/eslint-parser

接着，请将以下配置添加到你的 eslint.config.mjs 文件中：

import antfu from '@antfu/eslint-config'
import * as VueVineESLintParser from '@vue-vine/eslint-parser'

export default antfu(
  {
    // 在这里覆盖
    // antfu ESLint 预设的配置
  },
  {
    // 在这里放一些
    // 可能会被其他非 Vine 文件
    // 用到的用户配置
  },
  {
    files: [
      'path/to/**/*.vine.ts',
    ],
    languageOptions: {
      parser: VueVineESLintParser,
    },
    rules: {
      // 在这里定制 `.vine.ts` 文件的规则
    },
  },
)

命令行中的 TypeScript 检查器

我们知道 Vue 提供了 vue-tsc 来检查 .vue 文件的 TypeScript，为了支持 Vine，我们也提供了一个类似的命令 vue-vine-tsc 来检查 .vine.ts 文件。

值得一提的是： vue-vine-tsc 与 vue-tsc 兼容，所以你也可以用它来检查 .vue 文件。

要安装这个包，请运行以下命令：

pnpm i -D vue-vine-tsc

接着，在 package.json 的 "build" 脚本中，你可以将 vue-tsc -b && ... 替换为：

{
  "scripts": {
-    "build": "vue-tsc -b && vite build",
+    "build": "vue-vine-tsc -b && vite build",
  }
}

项目模板

你可以渐进式地将 Vue Vine 集成到现有的 Vue 3 项目中，但如果你想要启动一个新项目，放弃 SFC，只使用 Vue Vine，我们也为你提供了一个创建项目模板的脚手架工具。

可选： 运行以下命令全局安装 CLI：

pnpm i -g create-vue-vine

接着，运行以下命令来创建一个新项目：

# 你没有全局安装 CLI 的话
pnpx create-vue-vine my-vine-project

# 你已经全局安装 CLI 的话
create-vue-vine my-vine-project

你可能会看到以下输出：

> pnpx create-vue-vine my-vine-project

...

┌  Vue Vine - Another style of writing Vue components
│
◇  Use Vue Router?
│  Yes
│
◇  Project created at: /path/to/my-vine-project
│
◇  Install dependencies?
│  Yes
│

...

◇  Dependencies installed!
│
└  You're all set! Now run:

  cd my-vine-project
  pnpm dev

  Happy hacking!