新增colorui的样式库，引入antd组件库

assets/css/animation.css

@@ -0,0 +1,184 @@
+/*
+  Animation 微动画
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{
+    mix-blend-mode: screen;
+  }
+  .gif-white{
+    mix-blend-mode: multiply;
+  }
+
+
+  /* Animation css */
+  [class*=animation-] {
+      animation-duration: .5s;
+      animation-timing-function: ease-out;
+      animation-fill-mode: both
+  }
+
+  .animation-fade {
+      animation-name: fade;
+      animation-duration: .8s;
+      animation-timing-function: linear
+  }
+
+  .animation-scale-up {
+      animation-name: scale-up
+  }
+
+  .animation-scale-down {
+      animation-name: scale-down
+  }
+
+  .animation-slide-top {
+      animation-name: slide-top
+  }
+
+  .animation-slide-bottom {
+      animation-name: slide-bottom
+  }
+
+  .animation-slide-left {
+      animation-name: slide-left
+  }
+
+  .animation-slide-right {
+      animation-name: slide-right
+  }
+
+  .animation-shake {
+      animation-name: shake
+  }
+
+  .animation-reverse {
+      animation-direction: reverse
+  }
+
+  @keyframes fade {
+      0% {
+          opacity: 0
+      }
+
+      100% {
+          opacity: 1
+      }
+  }
+
+  @keyframes scale-up {
+      0% {
+          opacity: 0;
+          transform: scale(.2)
+      }
+
+      100% {
+          opacity: 1;
+          transform: scale(1)
+      }
+  }
+
+  @keyframes scale-down {
+      0% {
+          opacity: 0;
+          transform: scale(1.8)
+      }
+
+      100% {
+          opacity: 1;
+          transform: scale(1)
+      }
+  }
+
+  @keyframes slide-top {
+      0% {
+          opacity: 0;
+          transform: translateY(-100%)
+      }
+
+      100% {
+          opacity: 1;
+          transform: translateY(0)
+      }
+  }
+
+  @keyframes slide-bottom {
+      0% {
+          opacity: 0;
+          transform: translateY(100%)
+      }
+
+      100% {
+          opacity: 1;
+          transform: translateY(0)
+      }
+  }
+
+  @keyframes shake {
+
+      0%,
+      100% {
+          transform: translateX(0)
+      }
+
+      10% {
+          transform: translateX(-9px)
+      }
+
+      20% {
+          transform: translateX(8px)
+      }
+
+      30% {
+          transform: translateX(-7px)
+      }
+
+      40% {
+          transform: translateX(6px)
+      }
+
+      50% {
+          transform: translateX(-5px)
+      }
+
+      60% {
+          transform: translateX(4px)
+      }
+
+      70% {
+          transform: translateX(-3px)
+      }
+
+      80% {
+          transform: translateX(2px)
+      }
+
+      90% {
+          transform: translateX(-1px)
+      }
+  }
+
+  @keyframes slide-left {
+      0% {
+          opacity: 0;
+          transform: translateX(-100%)
+      }
+
+      100% {
+          opacity: 1;
+          transform: translateX(0)
+      }
+  }
+
+  @keyframes slide-right {
+      0% {
+          opacity: 0;
+          transform: translateX(100%)
+      }
+
+      100% {
+          opacity: 1;
+          transform: translateX(0)
+      }
+  }

nuxt.config.ts

@@ -1,6 +1,9 @@
 export default defineNuxtConfig({
-    modules: [
+  css: [
-      '@nuxt/ui'
+      'ant-design-vue/dist/antd.css',
-    ]
+      '@/assets/css/main.css'
-  })
+  ],
-  
+  modules: [
+      //'@nuxt/ui'
+  ]
+})

server/api/test.js

@@ -1,4 +1,4 @@
-export default defineEventHandler(() => {
+export default defineEventHandler((e) => {
     return {
       title: 'Mount Everest',
       description: "Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point",