问卷低代码平台-首页

安装路由

pnpm i vue-router

在src目录下创建router文件夹
src/router/index.ts

import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home',
    component: async () => await import('@/layouts/MainLayout.vue'),
    children: [
      {
        path: '/home',
        name: 'home',
        component: async () => await import('@/views/home/index.vue')
      }
    ]
  }
]

export default createRouter({
  routes,
  history: createWebHashHistory()
})

开发首页

在src目录下创建views文件夹，再创建home目录
src/layouts/MainLayout.vue
el-main做为页面内容显示区域

<template>
  <div class="common-layout">
    <el-container class="h-screen">
      <el-header>
        <div class="flex justify-between px-12 bg-black text-slate-50 items-center h-full">
          <div class="flex justify-center items-center">
            <div class="flex items-center">
              <el-icon :size="50">
                <Edit />
              </el-icon>
            </div>
            <h1 class="text-4xl">问卷低代码平台</h1>
          </div>
          <div>
            登录
        </div>
      </el-header>
      <el-main><RouterView /></el-main>
      <el-footer class="bg-gray-200"></el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
:deep() {
  --el-header-padding: 0;
}
:deep() {
  --el-main-padding: 0px;
}
:deep() {
  --el-footer-padding: 0px;
}
</style>

src/App.vue

<template>
+ <RouterView />
</template>

<script setup lang="ts"></script>

<style scoped></style>

src/views/home/index.vue

<template>
  <div class="flex justify-center items-center h-full flex-col bg-bgclg">
    <div class="text-center flex flex-col justify-between">
      <h1 class="text-4xl">问卷调查 | 在线投票</h1>
      <div>
        <el-button type="primary"> 开始使用 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
:deep().el-button {
  height: 60px;
  font-size: 24px;
}
</style>

暗黑模式

安装vueuse

pnpm install @vueuse/core

在main.ts引入element-plus/theme-chalk/dark/css-vars.css

import { createApp } from 'vue'
import App from './App.vue'
import 'normalize.css'
import './index.css'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+ import 'element-plus/theme-chalk/dark/css-vars.css'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router).mount('#app')

在el-header右边增加切换模式组件，借助vueuse的useDark, useToggle

<template>
  <div class="common-layout">
    <el-container class="h-screen">
      <el-header>
        <div class="flex justify-between px-12 bg-black text-slate-50 items-center h-full">
          <div class="flex justify-center items-center">
            <div class="flex items-center">
              <el-icon :size="50">
                <Edit />
              </el-icon>
            </div>
            <h1 class="text-4xl">问卷低代码平台</h1>
          </div>
          <div class="flex justify-between items-center">
+            <div>
+              <el-switch
+                v-model="theme"
+                @change="toggleDark()"
+                inline-prompt
+                :inactive-action-icon="Sunny"
+                :active-action-icon="Moon"
+                active-color="var(--el-fill-color-dark)"
+                inactive-color="var(--el-color-primary)"
+              />
+            </div>
+            <div class="p-1">登录</div>
          </div>
        </div>
      </el-header>
      <el-main><RouterView /></el-main>
      <el-footer class="bg-gray-200"></el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
+import { Sunny, Moon } from '@element-plus/icons-vue'
+
+import { useDark, useToggle } from '@vueuse/core'
+
+const theme = ref(false)
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
</script>
</script>