4. Admin 后台项目指南

• 1. 初始化项目
• 3. 动画

1. 初始化项目

IMPORTANT

环境要求：

• Node.js >= 20.x
• pnpm >= 8.x

pnpm dlx nuxi init $project_name
cd $project_name
pnpm i

NOTE

为什么不使用 UnoCSS 而使用 Tailwind CSS？

• 虽然 UnoCSS 完全兼容 Tailwind CSS 的类名，但是我们在很多项目中依赖 Tailwind CSS 的插件和定制化功能。
• 只维护一种 CSS 框架，可以减少维护成本。

3. 动画

Nuxt Auto Animate 支持了自动动画的功能，我们无需编写和动画相关的函数即可自动处理动画。

默认开启了动画功能，在需要动画的父组件上使用 v-auto-animate 指令即可自动开启动画，详情参见 Auto Animate 文档。

<script setup lang="ts">
const items = ref(["😏","😐","😑","😒","😕"])
function removeItem(toRemove) {
  items.value = items.value.filter((item) => item !== toRemove)
}
</script>

<template>
  <div>
    <h5>Click emojis to remove them.</h5>
    <ul v-auto-animate>
      <li
        v-for="item in items"
        :key="item"
        @click="removeItem(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>