非你网

初始化项目后，我们需要对项目进行一些配置，以及安装一些插件

修改 node 的规范模式

先修改 node 的规范模式。默认是 commonjs，我们把它改成 es Module 模式。

修改package.json 文件中的 type 属性（没有就加一个。

{
    …,
    "type": "module"
}

在 commonjs 规范中，导入使用 require。es Module 中，则使用 import 。这是大家最直接基本的映象。当然还有很多的细节问题，可以另外查阅。

最基本的结构

新建 layouts 文件夹，创建 base.vue 文件，填入以下代码。

<template>
    <div class="content">
        <slot></slot>
    </div>
</template>

新建 pages 文件夹，创建 index.vue 文件，该文件会成为新的入口文件。填入以下代码。

<template>
    <NuxtLayout name="base">
        <h2>这是首页</h2>
    </NuxtLayout>
</template>

删除 app.vue 文件。如果报错，请重新运行。

pnpm dev

看到的页面和 dom 结构如下图所示。

到此，layouts 和 pages 已经建立。没额外 css，也没更多的 div。就先这样。

官方建议：

1. 如果你所有页面都一个统一的布局，建议不使用 layouts，直接在 app.vue 中自己写。因为自己写和 layouts 实现的都是同样的布局。个人还是喜欢实用 layouts，一方面以后好扩展，二方面感觉独立开来比较干净。

2. 官方建议不要直接在根目录下使用 layout。这个不太理解。通过上边的实际渲染结果，没任何嵌套的顶层的 layout 就是在 id 选择器为 __nuxt 的下边。

安装配置插件

# 这些是辅助编译打包，放在 devDependencies 配置项下
pnpm add sass postcss autoprefixer tailwindcss daisyui -D

# 生成配置文件(-p 就是连 postcss 的配置文件一起生成)
# 生成了 postcss.config.js 和 tailwind.config.js 配置文件
pnpx tailwindcss init -p

修改 postcss.config.js 。

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    "tailwindcss": {},
    "autoprefixer": {},
    "cssnano": true
  },
}

• postcss-import 解决@import引入路径问题。
• autoprefixer 用来自动处理浏览器前缀的一个插件
• cssnano 会压缩您CSS文件，以确保下载在您的生产环境中尽可能小

参考

修改 tailwind.config.js 。

import Daisyui  from 'daisyui'

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    Daisyui,
  ],
  daisyui: {
    themes: ['light', 'dark']
  }
}

在 nuxt.config.ts 中导入文件。

import postcss from './postcss.config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  css: [

  ],
  postcss,
})

到此，前端的 tailwindcss 和 daisyui 配置好了。

下边来配置一个 css。
https://nuxt.com/docs/api/configuration/nuxt-config#css

创建 assets/css/main.scss 文件，填入一下内容。

@tailwind base;
@tailwind components;
@tailwind utilities;

然后配置到 nuxt.config.ts 文件中。这里是一个数组，可以配置多个的。

css: [
'@/assets/css/main.scss'
]

到此，基于 tailwindcss，sass，daisyui 的一个环境已经好了。

再看看页面。发现空白没有了。字体大小也变化了。

到此，基本结构和基本插件也完成了。

养成好习惯，提交版本控制。

git add .
git commit -m '基本结构建立，前端插件安装配置完成'

如果对 tailwindcss 和 daisyui 不熟悉的，得先熟悉熟悉这两个插件。本来说 nuxt 是和这个无关的。可是，如果是真的做网站，做自适应网站，官网，博客等等，这两个插件使用上，是真的好。技术选择还是比较多的，你可以选择其中的一个，一套，把事情做好了不就是很好吗。

人就是使用工具干事的。那些创造工具的人是人才呀。使用工具还有什么话可说呢。

如果上边这个两个插件都很熟悉。那下一步，就是基本结构的丰满完善。