vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程

// 安装 vite-plugin-vue-layouts
npm install vite-plugin-vue-layouts --save-dev
 
// vite.config.js 配置
import { defineConfig } from 'vite'
import VueLayouts from 'vite-plugin-vue-layouts'
 
export default defineConfig({
  plugins: [
    VueLayouts({
      // 配置选项
    }),
  ],
})
 
// 在 Vue 组件中使用布局
<script>
export default {
  layout: 'blog', // 指定组件使用的布局
}
</script>
 
// 在 src/layouts 目录下定义布局组件
// src/layouts/blog.vue
<template>
  <div class="blog-layout">
    <!-- 头部导航等通用内容 -->
    <slot /> <!-- 用于显示页面内容 -->
    <!-- 底部信息等通用内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'BlogLayout',
}
</script>

这个例子展示了如何在Vue 3项目中使用vite-plugin-vue-layouts插件来创建全局布局。安装插件后，在Vite配置文件中进行配置，然后在项目的src/layouts目录下定义布局组件。在Vue组件中通过layout选项指定使用哪个布局。