feat: rewrite index.vue

Author: cwandev

app.vue

@@ -1,22 +1,26 @@
+<script setup lang="ts">
+import type { ConfigProviderTheme } from 'vant'
+const mode = ref<ConfigProviderTheme>('light')
+
+</script>
+
 <template>
-  <div id="app">
+  <VanConfigProvider :theme="mode">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-  </div>
+  </VanConfigProvider>
 </template>
 
 <style>
-html,
-body,
 #__nuxt {
   height: 100vh;
   margin: 0;
   padding: 0;
 }
 
-#app {
-  width: 100%;
-  height: 100%;
+html {
+  background: var(--van-gray-1);
+  color-scheme: light;
 }
 </style>

nuxt.config.ts

@@ -1,29 +1,29 @@
 export default defineNuxtConfig({
-  devtools: { enabled: true },
   modules: [
     '@vant/nuxt',
     '@unocss/nuxt',
     'nuxt-module-eslint-config',
   ],
 
-  typescript: {
-    shim: false,
-  },
-
   css: [
     '@unocss/reset/tailwind.css',
   ],
 
   postcss: {
     plugins: {
-      // https://github.com/wswmsword/postcss-mobile-forever
       'autoprefixer': {},
+
+      // https://github.com/wswmsword/postcss-mobile-forever
       'postcss-mobile-forever': {
-        appSelector: '#app',
+        appSelector: '#__nuxt',
         viewportWidth: 375,
         maxDisplayWidth: 600,
-        exclude: /node_modules/,
+        // exclude: /node_modules/,
       },
     },
   },
+
+  devtools: { enabled: true },
+
+  typescript: { shim: false },
 })

package.json

@@ -18,10 +18,12 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.8.3",
+    "@unocss/eslint-plugin": "^0.58.6",
     "@unocss/nuxt": "^0.58.6",
     "@unocss/preset-rem-to-px": "^0.58.6",
     "@vant/nuxt": "^1.0.4",
     "eslint": "npm:eslint-ts-patch@^8.57.0-0",
+    "eslint-plugin-format": "^0.1.0",
     "eslint-ts-patch": "^8.57.0-0",
     "nuxt-module-eslint-config": "^0.1.1",
     "postcss-mobile-forever": "^4.1.2",

pages/index.vue

@@ -1,8 +1,32 @@
+<script setup lang="ts">
+const menuItems = [
+  { title: '💿 Mock 指南', route: 'mock' },
+  { title: '📊 Echarts 演示', route: 'charts' },
+  { title: '🎨 Unocss 示例', route: 'unocss' },
+  { title: '🍍 持久化 Pinia 状态', route: 'counter' },
+  { title: '🙅 404页 演示', route: 'unknown'},
+]
+
+const checked = ref<boolean>(false)
+
+function toggle() {
+  checked.value = !checked.value
+}
+
+</script>
+
+
 <template>
-  <div class="text-16 text-gray-800">
-    你好
-  </div>
-</template>
+  <VanCellGroup inset>
+    <VanCell center title="🌗 暗黑模式">
+      <template #right-icon>
+        <VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
+      </template>
+    </VanCell>
 
-<style scoped>
-</style>
+    <template v-for="item in menuItems" :key="item.route">
+      <!-- item.route -->
+      <VanCell :title="item.title" to="/" is-link />
+    </template>
+  </VanCellGroup>
+</template>