我们根据nuxt官网的介绍，只需要按官网的步骤来创建自己的第一个项目就好！

前提条件

• Node.js版本v16.10 以上
• 开发工具 - 推荐 Visual Studio Code + Volar 扩展工具
• 终端 - 用于执行nuxt命令，这个VS Code 有自带，或者用系统的Terminal也可以

首先我们打开终端执行命令

 npx nuxi@latest init <project-name>

初始化完成之后，执行

• cd nuxt3-admin-template 进入项目根目录
• 使用命令安装依赖 Install dependencies with npm install or yarn install or pnpm install
• 启动项目 Start development server with npm run dev or yarn dev or pnpm run dev

很简单，你已经成功运行了你的第一个nuxt项目！打开浏览器输入
http://localhost:3000/

image.png

我们先来看初始化项目里面的文件。

• public 用于存放公共文件和配置项目ico文件
• server 可以自己开发服务API，或者服务端调用三方API，开发接口中间件等等。
• app.vue 项目的主入口文件
• nuxt.config.ts 项目的主要配置文件，配置全局模块，插件，环境变量，等等。
• 其他我们后续涉及到再一一介绍

引入 NuxtTaiwind 和 ColorMode 主题配置

官网地址

安装

# 在终端中执行命令
npm install -D @nuxtjs/tailwindcss
# 安装完成之后需要在 nuxt.config.ts 文件中导入模块
{
    modules: ['@nuxtjs/tailwindcss']
}

新建配置tailwind.config.ts 文件在根目录，重写或自定义Taiwind css class 变量

#新增 nuxt.config.ts 配置

{
  ...,
  tailwindcss: {
    exposeConfig: true,
  },
}

# tailwind.config.ts 
import type { Config } from "tailwindcss";
// import defaultTheme from "tailwindcss/defaultTheme";
export default <Partial<Config>>{
  darkMode: "class",
  content: [
    "components/**/*.{vue,js,ts}",
    "layouts/**/*.vue",
    "pages/**/*.vue",
    "composables/**/*.{js,ts}",
    "plugins/**/*.{js,ts}",
    "App.{js,ts,vue}",
    "app.{js,ts,vue}",
    "Error.{js,ts,vue}",
    "error.{js,ts,vue}",
    "content/**/*.md",
  ],
  googleFonts: {
    families: {
      Roboto: true, // 配置全局google 字体，用 font-Roboto  来使用
    },
  },
  theme: {
    extend: { // 用来自定义或者重写样式
      colors: {}, 
    },
  },
};

让我们新建一个页面试一下效果

• pages 文件夹，首先我们要在根目录新建一个pages 文件夹，用来管理后面所有的新页面，nuxt会自动根据pages下面的文件目录生成类似 vue-router的级联路由，具体查看Nuxt-Routing
• 修改app.vue, 当我们新建好 pages/tailwind.vue后，

<template>
  <div class="text-center text-red-400">Tailwind</div>
</template>

访问 http://localhost:3000/tailwind 你会发现页面没有任何变化。因为 app.vue 是应用的主入口文件，当我们新建了自己的页面时，需要在app.vue里面加入<NuxtPage></NuxtPage>, 这个原理就和vue-router的<router-view></router-view> 类似。

<template>
  <div>
   <NuxtPage></NuxtPage>
    <NuxtWelcome />
  </div>
</template>

修改重新访问 http://localhost:3000/tailwind, 页面显示如下

image.png

发现我们新代码以及成功显示在顶部了。那接下来我们来开始下一步，映入nuxt-colorMode 实现系统主题切换

引入 color-mode 主题配置

# 终端运行命令
npm i @nuxtjs/color-mode -D
# 安装完成之后需要在 nuxt.config.ts 文件中导入模块
{
    modules: ['@nuxtjs/tailwindcss', "@nuxtjs/color-mode"],
    colorMode: {
        classSuffix: "",
    },
}

color-mode.vue

# color-mode.vue
<script setup>
const colorMode = useColorMode()
</script>

<template>
  <div class="bg-slate-400 dark:bg-red-500">
    <p class="p-4 pb-2">
      <select
        v-model="colorMode.preference"
        class="border w-24 h-8 dark:bg-gray-900 dark:text-white dark:border-gray-700"
      >
        <option value="system">System</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>
    </p>
    <NuxtPage class="mx-auto p-4" />
  </div>
</template>

接下来我们新增一个页面pages/color-mode.vue 来测试效果

image.png

image.png