层

层的结构与普通的Vixt项目相同，继承层将会复用层内的组件、函数、配置等，这使得层可以作为一个可复用的项目，提高开发效率。

层的使用

本地层

假设monorepo中是这样一个结构，那么 web 项目和 app 项目都将继承 layer-shared 的vixt配置

目录结构

-| packages/
---| layer-shared
-----| src
-----| vixt.config.ts
---| web
-----| src
-----| vixt.config.ts
---| app
-----| src
-----| vixt.config.ts

layer-shared/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  meta: { name: 'layer-shared' },
  typescript: {
    typeCheck: { vueTsc: true },
  },
})

web/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  extends: ['../layer-shared'],
})

app/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  extends: ['../layer-shared'],
})

远程层

合法的npm包也可以作为层来使用，只需将层的vixt.config.ts文件作为包入口即可

@vixt/layer-shared/package.json

{
  "name": "@vixt/layer-shared",
  "type": "module",
  "main": "vixt.config.ts",
  "devDependencies": {
    "vixt": "latest"
  }
}

web/package.json

{
  "name": "web",
  "type": "module",
  "dependencies": {
    "vixt": "latest",
    "@vixt/layer-shared": "latest"
  }
}

web/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  extends: ['@vixt/layer-shared'],
})

层继承层

层也可以继承层，从而实现更复杂的继承关系

layer-shared/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  meta: { name: 'layer-shared' },
  typescript: {
    typeCheck: { vueTsc: true },
  },
})

layer-web/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  meta: { name: 'layer-web' },
  extends: ['../layer-shared'],
  devtools: { enabled: true }
})

web/vixt.config.ts

import { defineVixtConfig } from 'vixt'

export default defineVixtConfig({
  extends: ['../layer-web'],
  // 或者继承多个层
  // extends: ['../layer-web', '../layer-other'],
})