https://github.com/uni-helper/vite-plugin-uni-layouts

为 Vite 下的 uni-app 提供类 nuxt 的 layouts 系统
https://github.com/uni-helper/vite-plugin-uni-layouts

layouts uni-app vite

Last synced: about 2 months ago
JSON representation

为 Vite 下的 uni-app 提供类 nuxt 的 layouts 系统

• Host: GitHub
• URL: https://github.com/uni-helper/vite-plugin-uni-layouts
• Owner: uni-helper
• License: mit
• Created: 2022-11-18T10:02:18.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T10:36:29.000Z (8 months ago)
• Last Synced: 2024-05-22T02:58:02.745Z (8 months ago)
• Topics: layouts, uni-app, vite
• Language: TypeScript
• Homepage:
• Size: 342 KB
• Stars: 21
• Watchers: 2
• Forks: 7
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-uni-app - vite - helper/vite-plugin-uni-layouts) - 为 Vite 下的 uni-app 提供类 nuxt 的 layouts 系统。 (打包器插件)

README

        
# @uni-helper/vite-plugin-uni-layouts

Vite 下 uni-app 的可定制布局框架

## 安装

```bash

pnpm i -D @uni-helper/vite-plugin-uni-layouts

```

## 使用

### 配置

```ts

// 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()],

})

```

### 创建布局

在 `src/layouts` 下创建布局

```vue

  main

```

### 应用布局

在 pages.json 中的页面中添加 layout 配置

```json

// pages.json

{

  // ...

  "pages": [{

    "path": "pages/index/index",

    // 可选, 这是默认值

    "layout": "default"

  }]

  // ...

}

```

### 禁用布局

```json

// pages.json

{

  // ...

  "pages": [{

    "path": "pages/index/index",

    "layout": false

  }]

  // ...

}

```

### 动态布局和额外插槽

你需要先**禁用页面**的布局， 然后使用内置组件 ``, 使用 `name` 属性指定布局，支持动态绑定 name、ref 等任意属性

```vue

const defaultName = ref('default')

  

    uni-layout header

    use slot

    uni-layout footer

  

```

### `ref`

只需声明一个 ref 变量 `uniLayout` 即可访问

```vue

const uniLayout = ref()

```

或者

```vue

export default {

  onLoad() {

    console.log(this.$refs.uniLayout)

  }

}

```

## 配置

see [type.ts](./src/types.ts)

## 注意

layout 插件并非使用了什么魔法，它只做了两件事：

1. 自动扫描并全局注册 layouts 目录下的组件

2. 将页面使用 layout 组件包裹起来

   所以，在微信小程序下，如果你使用了 web-view , 那么不会生效。

如果你使用 [vite-plugin-uni-pages](https://github.com/uni-helper/vite-plugin-uni-pages), 只需使用 route-block

```vue

{

  "layout": "anyLayout"

}

```