feat: New layout system (#62)

Author: cwandev

README.md

@@ -34,6 +34,8 @@
 
 - 🍍 [State Management via Pinia](https://pinia.vuejs.org)
 
+- 📑 [Layout system](./src/layouts)
+
 - 🎨 [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine
 
 - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
@@ -79,13 +81,17 @@
 
 - [Vue Router](https://github.com/vuejs/router)
   - [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - file system based routing
+  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
 - [Pinia](https://pinia.vuejs.org) - Intuitive, type safe, light and flexible Store for Vue using the composition api
   - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) -  Configurable persistence and rehydration of Pinia stores
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - components auto import
 - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole) - A lightweight, extendable front-end developer tool for mobile web page
 - [vite-plugin-mock-dev-server](https://github.com/pengzhanbo/vite-plugin-mock-dev-server) - Vite Plugin for API mock dev server
 - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - To adapt different displays by one mobile viewport
+- [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - Designed to enhance the Vue developer experience
+- [vueuse](https://github.com/antfu/vueuse) - collection of useful composition APIs
+- [@unhead/vue](https://github.com/unjs/unhead) - manipulate document head reactively
 
 ### Coding Style
 

README.zh-CN.md

@@ -34,6 +34,8 @@
 
 - 🍍 [使用 Pinia 的状态管理](https://pinia.vuejs.org)
 
+- 📑 [布局系统](./src/layouts)
+
 - 🎨 [UnoCSS](https://github.com/antfu/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎
 
 - 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
@@ -79,13 +81,17 @@
 
 - [Vue Router](https://github.com/vuejs/router)
   - [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) - 以文件系统为基础的路由
+  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - 页面布局系统
 - [Pinia](https://pinia.vuejs.org) - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理库
   - [`pinia-plugin-persistedstate`](https://github.com/prazdevs/pinia-plugin-persistedstate) -  适用于 Pinia 的持久化存储插件
 - [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - 自动加载组件
 - [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 等，无需导入
 - [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole) - vConsole 的 vite 插件
 - [vite-plugin-mock-dev-server](https://github.com/pengzhanbo/vite-plugin-mock-dev-server) - vite mock 开发服务（mock-dev-server）插件
 - [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) - 一款 PostCSS 插件，将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图
+- [vite-plugin-vue-devtools](https://github.com/vuejs/devtools-next) - 旨在增强Vue开发者体验的Vite插件
+- [vueuse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集
+- [@unhead/vue](https://github.com/unjs/unhead) - 响应式地操作文档头信息
 
 ### 编码风格
 

build/vite/index.ts

@@ -10,33 +10,36 @@ import { VantResolver } from 'unplugin-vue-components/resolvers'
 import { unheadVueComposablesImports } from '@unhead/vue'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import Layouts from 'vite-plugin-vue-layouts'
 import UnoCSS from 'unocss/vite'
 import { createViteVConsole } from './vconsole'
 
 export function createVitePlugins() {
   return [
+    // https://github.com/posva/unplugin-vue-router
     VueRouter({
-      routesFolder: 'src/views',
+      extensions: ['.vue'],
+      routesFolder: 'src/pages',
       dts: 'src/typed-router.d.ts',
     }),
 
     vue(),
-    vueJsx(),
-    visualizer(),
-    UnoCSS(),
-    mockDevServerPlugin(),
 
-    legacy({
-      targets: ['defaults', 'not IE 11'],
-    }),
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
+    // https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+    mockDevServerPlugin(),
 
+    // https://github.com/antfu/unplugin-vue-components
     Components({
       extensions: ['vue'],
       resolvers: [VantResolver()],
       include: [/\.vue$/, /\.vue\?vue/],
       dts: 'src/components.d.ts',
     }),
 
+    // https://github.com/antfu/unplugin-auto-import
     AutoImport({
       include: [
         /\.[tj]sx?$/,
@@ -59,8 +62,21 @@ export function createVitePlugins() {
       ],
     }),
 
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS(),
+
+    // https://github.com/vadxq/vite-plugin-vconsole
     createViteVConsole(),
 
+    // https://github.com/webfansplz/vite-plugin-vue-devtools
     VueDevTools(),
+
+    vueJsx(),
+    visualizer(),
+
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+    }),
   ]
 }

package.json

@@ -68,6 +68,7 @@
     "vite-plugin-mock-dev-server": "^1.4.7",
     "vite-plugin-vconsole": "^2.1.1",
     "vite-plugin-vue-devtools": "^7.0.14",
+    "vite-plugin-vue-layouts": "^0.11.0",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"
   },

pnpm-lock.yaml

@@ -16,6 +16,7 @@ declare module 'vue' {
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanEmpty: typeof import('vant/es')['Empty']
+    VanIcon: typeof import('vant/es')['Icon']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanSpace: typeof import('vant/es')['Space']
     VanSwitch: typeof import('vant/es')['Switch']

src/components.d.ts

@@ -1,5 +1,5 @@
 <template>
-  <main class="h-full w-full p-16 py-60">
+  <div class="p-16 py-60">
     <slot />
-  </main>
+  </div>
 </template>

src/components/container/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y16" text-18 text="center gray-300 dark:gray-200">
+    <van-icon name="warn-o" size="3em" />
+
+    <RouterView />
+
+    <div class="mt-10">
+      <button van-haptics-feedback btn m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+
+</style>

src/layouts/404.vue

@@ -0,0 +1,14 @@
+# Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+With [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+
+```vue
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```

src/layouts/README.md

@@ -0,0 +1,9 @@
+<template>
+  <main text="gray-700 dark:gray-200">
+    <RouterView />
+
+    <div mx-auto mt-15 text-center text-14 opacity-50>
+      Default Layout
+    </div>
+  </main>
+</template>