基础架构搭建

.eslintrc.cjs

@@ -3,13 +3,19 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
+    '@vue/eslint-config-typescript/recommended',
+    '@vue/eslint-config-prettier'
   ],
   parserOptions: {
     ecmaVersion: 'latest'
+  },
+  rules: {
+    'no-undef': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    'vue/multi-word-component-names': 'off'
   }
 }

.prettierrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  printWidth: 120,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  // proseWrap: 'preserve',
+  htmlWhitespaceSensitivity: 'css',
+  endOfLine: 'lf',
+  arrowParens: 'avoid'
+}

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}

package.json

@@ -13,35 +13,36 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "@vueuse/core": "^9.13.0",
-    "axios": "^1.3.4",
-    "element-plus": "^2.3.1",
-    "pinia": "^2.0.32",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "@vueuse/core": "^10.2.1",
+    "axios": "^1.4.0",
+    "element-plus": "^2.3.7",
+    "pinia": "^2.1.4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@types/node": "^18.14.2",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node18": "^18.2.0",
+    "@types/node": "^20.3.3",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.44.0",
+    "eslint-plugin-vue": "^9.15.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
-    "sass": "^1.60.0",
-    "typescript": "~4.8.4",
-    "unocss": "^0.50.6",
-    "unplugin-auto-import": "^0.15.2",
-    "unplugin-icons": "^0.16.0",
-    "unplugin-vue-components": "^0.24.1",
-    "unplugin-vue-define-options": "^1.3.2",
-    "vite": "^4.1.4",
+    "prettier": "^2.8.8",
+    "sass": "^1.63.6",
+    "typescript": "~5.1.6",
+    "unocss": "^0.53.4",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-icons": "^0.16.3",
+    "unplugin-vue-components": "^0.25.1",
+    "unplugin-vue-define-options": "^1.3.8",
+    "vite": "^4.3.9",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.8.3"
   }
 }

src/auto-import.d.ts

@@ -21,7 +21,9 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -103,6 +105,7 @@ declare global {
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -113,11 +116,14 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -204,6 +210,8 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -271,8 +279,10 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']

src/components.d.ts

@@ -3,22 +3,22 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
-    IconCommunity: typeof import('./components/icons/IconCommunity.vue')['default']
-    IconDocumentation: typeof import('./components/icons/IconDocumentation.vue')['default']
-    IconEcosystem: typeof import('./components/icons/IconEcosystem.vue')['default']
-    IconSupport: typeof import('./components/icons/IconSupport.vue')['default']
-    IconTooling: typeof import('./components/icons/IconTooling.vue')['default']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    GlobalHeader: typeof import('./components/GlobalHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TheWelcome: typeof import('./components/TheWelcome.vue')['default']
-    WelcomeItem: typeof import('./components/WelcomeItem.vue')['default']
   }
 }

src/components/GlobalHeader.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const navList = [
+  {
+    title: '首页',
+    path: '/home'
+  },
+  {
+    title: '关于我们',
+    path: '/about'
+  }
+]
+</script>
+
+<template>
+  <header class="bg-white h-60px">
+    <div class="container h-full mx-auto px-4">
+      <nav class="flex h-full items-center justify-between py-5px">
+        <div class="flex items-center">
+          <img src="logo.png" alt="Logo" class="h-50px" />
+        </div>
+        <el-menu router default-active="/home" class="el-menu-demo" mode="horizontal" :ellipsis="false">
+          <el-menu-item :index="item.path" v-for="item in navList" :key="item.path">
+            {{ item.title }}
+          </el-menu-item>
+        </el-menu>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<style lang="scss" scoped>
+.el-menu--horizontal {
+  border-bottom: none;
+}
+.router-link {
+  height: 50px;
+}
+.router-link-active {
+  color: red;
+}
+</style>

src/layouts/BasicLayout.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<template>
+  <global-header></global-header>
+  <router-view></router-view>
+</template>
+
+<style scoped>
+.layout-container {
+  height: 100%;
+}
+.el-header,
+.el-footer {
+  padding: 0;
+}
+.el-main {
+  padding: var(--main-padding);
+}
+</style>

src/layouts/BlankLayout.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view />
+</template>

src/main.ts

@@ -6,6 +6,8 @@ import router from './router'
 
 import 'uno.css'
 import './assets/main.css'
+import 'element-plus/dist/index.css'
+
 import 'virtual:svg-icons-register'
 
 const app = createApp(App)

src/router/constantRouter.ts

@@ -0,0 +1,32 @@
+// import BlankLayout from '@/layouts/BlankLayout.vue'
+import BasicLayout from '@/layouts/BasicLayout.vue'
+import type { RouteRecordRaw } from 'vue-router'
+
+const constantRouter: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'layout',
+    component: BasicLayout,
+    redirect: '/home',
+    children: [
+      {
+        path: 'home',
+        name: 'home',
+        component: () => import('@/views/HomeView.vue'),
+        meta: {
+          title: '首页'
+        }
+      },
+      {
+        path: 'about',
+        name: 'about',
+        component: () => import('@/views/AboutView.vue'),
+        meta: {
+          title: '关于我们'
+        }
+      }
+    ]
+  }
+]
+
+export default constantRouter

src/router/index.ts

@@ -1,15 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import constantRouter from './constantRouter'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    },
-  ]
+  routes: [...constantRouter]
 })
 
 export default router

src/views/AboutView.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div>about</div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/HomeView.vue

@@ -1,7 +1,27 @@
-<script lang='ts' setup></script>
+<script lang="ts" setup></script>
 
 <template>
-  <div>home</div>
+  <el-carousel height="550px">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3 class="small justify-center" text="2xl">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
-<style lang='scss' scoped></style>
+<style lang="scss" scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 550px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

tsconfig.json

@@ -1,18 +1,27 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     },
-    "types": ["element-plus/global","unplugin-vue-define-options/macros-global"],
-    "jsx": "preserve"
+    "types": [
+      "element-plus/global",
+      "unplugin-vue-define-options/macros-global"
+    ],
+    "jsx": "preserve",
+    "moduleResolution": "node"
   },
-
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ]
-}
+}

tsconfig.node.json

@@ -1,8 +1,16 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "playwright.config.*"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "module": "ESNext",
+    "types": [
+      "node"
+    ]
   }
-}
+}