插件篇

• 项目中使用的插件列表
  • @uni-helper相关
    • vite-plugin-uni-pages: 让你无需手动配置pages.json 页面配置router自动生成。
    • vite-plugin-uni-platform: 基于文件名 (.<h5|mp-weixin|app>.) 的按平台编译插件，需配合vite-plugin-uni-pages使用。
    • vite-plugin-uni-manifest: 自动生成 manifest.json 插件，使用manifest.config.ts配置。
    • vite-plugin-uni-layouts: 自动生成页面布局插件，使用layouts文件夹配置。
  • Vite相关
    • vite-plugin-restart: 监听vite.config.js文件修改,自动重启服务插件。
    • unplugin-auto-import: 自动导入Vue、uni-app相关API插件。

说明

snail-ui 得益于 uni-helper 团队开发的插件，使得uni-app开发更加简单高效。感谢 uni-helper 团队的贡献！

 // 插件注意： Unixx需要在Uni()之前引入
plugins: [
  // uni-app pages配置 会根据route配置，自动生成路由
  UniPages({
    // 排除组件文件
    exclude: ['**/components/**/**.*'],
    // 'json5' | 'json' | 'yaml' | 'yml', 具体使用参看文档：https://uni-helper.js.org/vite-plugin-uni-pages
    routeBlockLang: 'json5',
    dts: 'src/types/uni-pages.d.ts',
    // 配置分包目录
    subPackages: ['src/sub-pages'],
  }),
  UniPlatform(),
  UniLayouts(),
  UniManifest(),
  Uni(),
]

注： Unixx需要在Uni()之前引入

vite-plugin-uni-pages

vite-plugin-uni-pages 约定式路由，可通过src/pages目录下创建.vue文件，自动生成pages.json路由文件。页面全局配置可通过src/pages.config.ts进行配置。

注：切勿在pages.json进行修改，运行时会被覆盖。

配置示例

 return defineConfig({
  // ...
  plugins: [
    // ... 
    UniPages({
      // 排除组件文件
      exclude: ['**/components/**/**.*'],
      // 'json5' | 'json' | 'yaml' | 'yml', 具体使用参看文档：https://uni-helper.js.org/vite-plugin-uni-pages
      routeBlockLang: 'json5',
      dts: 'src/types/uni-pages.d.ts',
      // 配置分包目录
      subPackages: ['src/sub-pages'],
    }),
  ]
 })

• exclude: 排除组件文件
• routeBlockLang: 页面路由配置文件格式，默认为json5，可选值为json、yaml、yml。具体使用参考文档
• dts: 生成pages.json类型声明文件路径，默认为src/types/uni-pages.d.ts。
• subPackages: 配置分包目录，不需要分包时，可以不配置，直接注释或者删除

使用示例(json)

<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "home"
}
</route>

• type: 使用 type="home" 属性设置首页 其他页面则不需要设置
• lang: 页面路由配置文件格式，默认为json，可选值为json、yaml、yml
• name: 页面路由名称，必须唯一，配合uni-mini-router插件，可以自动生成路由。
• style: 页面样式配置，具体参考uni-app文档

其他页面示例

<!-- other.vue -->
<route lang="json">
{
  "style": { "navigationBarTitleText": "其他" },
  "name": "other"
}
</route>

pages.config.ts

文件目录src/pages.config.ts，具体配置参考uni-app文档

import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages';
import { name } from './package.json';

/**
 * 全局配置
 */
export default defineUniPages({
  globalStyle: {
    navigationStyle: 'default',
    navigationBarTitleText: name,
    navigationBarBackgroundColor: '#f8f8f8',
    navigationBarTextStyle: 'black',
    backgroundColor: '#FFFFFF',
  },
});

import { name } from './package.json';直接读取package.json中的name字段作为项目名称,可以根据自己习惯修改即可！

vite-plugin-uni-platform

vite-plugin-uni-platform 基于文件名 (.<h5|mp-weixin|app>.) 的按平台编译插件，需配合vite-plugin-uni-pages使用

配置示例

return defineConfig({
  plugins: [
    UniPages({
      // 排除组件文件
      exclude: ['**/components/**/**.*'],
      // 'json5' | 'json' | 'yaml' | 'yml', 具体使用参看文档：https://uni-helper.js.org/vite-plugin-uni-pages
      routeBlockLang: 'json5',
      dts: 'src/types/uni-pages.d.ts',
      // 配置分包目录
      subPackages: ['src/sub-pages'],
    }),
    UniPlatform(),
  ]
})

vite-plugin-uni-manifest

vite-plugin-uni-manifest 自动生成 manifest.json 插件，使用manifest.config.ts配置。

vite-plugin-uni-layouts

vite-plugin-uni-layouts 自动生成页面布局插件，使用layouts文件夹配置。

├── play        
│   ├── src                          
│   │   ├── layouts   # 布局文件夹
│   │   │   ├── default.vue # 默认布局

配置示例

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

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

布局示例

<!-- default.vue -->
<template>
  <view class="defaul-app-layout">
    <slot />
  </view>
</template>

配合 vite-plugin-uni-pages, 只需使用 route-block,layout 默认 default无需配置

<route type="home" lang="json">
{
  "style": { "navigationBarTitleText": "首页" },
  "name": "home",
  "layout": "default"
}
</route>

unplugin-auto-import

unplugin-auto-import 自动导入Vue、uni-app、Uni-mini-router、Pinia等相关API插件。

配置示例

return defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'uni-app',
        'pinia',
        {
          from: 'uni-mini-router',
          imports: ['createRouter', 'useRouter', 'useRoute'],
        },
      ],
      dts: 'src/types/auto-import.d.ts',
      eslintrc: { enabled: true, globalsPropValue: true },
      vueTemplate: true,
    }),
  ]
})

使用示例

• uni-app 自动导入 onLaunch、onShow

<script setup lang="ts">
  onLaunch(() => {
    console.log('App Launch');
  });
</script>

• uni-mini-router 自动导入 createRouter、useRouter、useRoute

<script setup lang="ts">
  const router = useRouter();

  function handleToRouter() {
    router.push({ name: 'my' });
  }
</script>

• Pinia 自动导入 defineStore、useStore
• Vue 自动导入 ref、computed

<script setup lang="ts">
  const title = ref("snail-uni")
</script>