Uni Helper 插件

Uni Helper 是一个旨在增强 uni-app 系列产品的开发体验为爱发电的非官方组织。作为靠爱发电的非官方项目，Uni Helper 提供了打包工具插件支持、编辑器扩展支持、NPM 包等并尽力维护它们，而他们提供的众多插件组成了本项目的核心插件库。

Components 组件

大多数组件都是用户界面的可重用部分，如按钮和菜单。

得益于 @uni-helper/vite-plugin-uni-components，组件将自动注册到全局，你不需要显式导入它们。只需要在 src/components 目录下创建组件，然后直接使用即可。

src/pages/index.vue

<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>

src/components/AppAlert.vue

<template>
  <span>
    <slot />
  </span>
</template>

Pages 页面

通过组合使用组件，我们可以得到展示给用户的页面。

得益于 @uni-helper/vite-plugin-uni-pages，约定式路由（文件路由）的实现轻而易举。src/pages 目录下的每个文件都代表着一个路由。要创建新页面，只需要在这个目录里新增 .vue 文件。

src/pages/index.vue

<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>

src/pages/about.vue

<template>
  <section>
    <p>通过 `/pages/about` 来访问这个页面</p>
  </section>
</template>

Layouts 布局

布局可以用来创建通用界面（如页眉和页脚显示）的包装器，不同的页面可能需要不同的布局。布局是使用 Vue 的插槽功能实现的。

得益于 @uni-helper/vite-plugin-uni-layouts，你可以轻松地切换不同的布局。

src/layouts/default.vue 文件将作为默认布局。

src/layouts/default.vue

<template>
  <div>
    <AppHeader />
    <!-- src/pages/index.vue 和 src/pages/about.vue 内容展示 -->
    <slot />
    <AppFooter />
  </div>
</template>

src/pages/index.vue

<template>
  <div>
    <h1>欢迎使用 vitess-uni-app </h1>
    <AppAlert>
      这个组件会自动导入
    </AppAlert>
  </div>
</template>

src/pages/about.vue

<template>
  <section>
    <p>通过 `/pages/about` 来访问这个页面</p>
  </section>
</template>

在页面文件内设置 route 代码块可以指定自定义布局。

<route lang="json">
{
  "layout": "custom"
}
</route>

manifest 应用配置

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

得益于 @uni-helper/vite-plugin-uni-manifest，你可以使用 TypeScript 编写 uni-app 的 manifest.json。

// vite.config.ts
import Uni from '@dcloudio/vite-plugin-uni'
import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [UniManifest(), Uni()],
})

创建 manifest.config.(ts|mts|cts|js|cjs|mjs|json), 然后用 TypeScript 编写你的 manifest.json。

// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'

export default defineManifestConfig({
  // code here...
})

在 这里，你可以找到 uni-app 默认的 Vite-TS 模版的 manifest.json 是如何用 TypeScript 编写的。