feat: New layout system (#62)

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"
   },

src/components.d.ts

@@ -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/container/index.vue

@@ -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/layouts/404.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/README.md

@@ -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/default.vue

@@ -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>

src/layouts/home.vue

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

src/pages/[...all].vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    Not found
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>

src/views/counter/index.vue → src/pages/counter/index.vue

@@ -21,7 +21,7 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <div class="h-full w-full">
+  <div>
     <VanNavBar title="🍍 持久化 Pinia 状态" left-arrow fixed @click-left="onClickLeft" />
 
     <Container>
@@ -35,7 +35,7 @@ const onClickLeft = () => history.back()
       <p class="mt-4">
         number：<strong class="text-green-500"> {{ counter }} </strong>
       </p>
-      <button class="btn border-none btn-green" @click="add">
+      <button class="btn" @click="add">
         Add
       </button>
     </Container>

src/pages/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import useAppStore from '@/stores/modules/app'
+
+definePage({
+  name: 'main',
+  meta: {
+    level: 1,
+  },
+})
+
+const appStore = useAppStore()
+const checked = ref<boolean>(isDark.value)
+
+watch(
+  () => isDark.value,
+  (newMode) => {
+    checked.value = newMode
+  },
+  { immediate: true },
+)
+
+function toggle() {
+  toggleDark()
+  appStore.swithMode(isDark.value ? 'dark' : 'light')
+}
+</script>
+
+<template>
+  <VanCellGroup inset>
+    <VanCell center title="🌗 暗黑模式">
+      <template #right-icon>
+        <VanSwitch v-model="checked" size="20px" @click="toggle()" />
+      </template>
+    </VanCell>
+
+    <VanCell title="💿 Mock 指南" to="mock" is-link />
+    <VanCell title="📊 Echarts 演示" to="charts" is-link />
+    <VanCell title="🎨 Unocss 示例" to="unocss" is-link />
+    <VanCell title="🍍 持久化 Pinia 状态" to="counter" is-link />
+    <VanCell title="🙅 404 演示" to="unknown" is-link />
+
+    <VanCell center>
+      <template #title>
+        <span class="mr-4 v-middle">🚀 欢迎补充</span>
+        <VanTag type="primary">
+          PR
+        </VanTag>
+      </template>
+    </VanCell>
+  </VanCellGroup>
+</template>
+
+<route lang="yaml">
+  meta:
+    layout: home
+</route>

src/views/mock/index.vue → src/pages/mock/index.vue

@@ -24,7 +24,7 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <div class="h-full w-full">
+  <div>
     <VanNavBar title="💿 Mock 指南" left-arrow fixed @click-left="onClickLeft" />
 
     <Container>

src/views/unocss/index.vue → src/pages/unocss/index.vue

@@ -11,7 +11,7 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <div class="h-full w-full">
+  <div>
     <VanNavBar title="🎨 Unocss" left-arrow fixed @click-left="onClickLeft" />
 
     <Container>
@@ -21,8 +21,8 @@ const onClickLeft = () => history.back()
       <p class="mt-4 text-gray-700 dark:text-white">
         This is a simple example of Unocss in action.
       </p>
-      <button class="btn border-none btn-green">
-        Click me
+      <button class="btn">
+        Button
       </button>
     </Container>
   </div>

src/router/README.md

@@ -1,8 +1,8 @@
 # `File-based Routing`
 
-Routes will be auto-generated for Vue files in the  **src/views** dir with the same file structure.
+Routes will be auto-generated for Vue files in the  **src/pages** dir with the same file structure.
 Check out [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router) for more details.
 
-在 **src/views** 目录下的 Vue 文件会自动生成相同结构的路由。
+在 **src/pages** 目录下的 Vue 文件会自动生成相同结构的路由。
 
 查看[`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router)了解更多细节。

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router/auto'
+import { setupLayouts } from 'virtual:generated-layouts'
 import NProgress from 'nprogress'
 
 import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
@@ -8,6 +9,7 @@ NProgress.configure({ showSpinner: true, parent: '#app' })
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.VITE_APP_PUBLIC_PATH),
+  extendRoutes: routes => setupLayouts(routes),
 })
 
 router.beforeEach((to, from, next) => {

src/typed-router.d.ts

@@ -40,6 +40,7 @@ import type {
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     'main': RouteRecordInfo<'main', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
     'charts': RouteRecordInfo<'charts', '/charts', Record<never, never>, Record<never, never>>,
     'counter': RouteRecordInfo<'counter', '/counter', Record<never, never>, Record<never, never>>,
     'mock': RouteRecordInfo<'mock', '/mock', Record<never, never>, Record<never, never>>,