创建 nuxt3 项目，初步尝试

项目环境

Node.js >= 16.0

项目搭建

简洁版安装：npx nuxi@latest init <project-name>

(选择喜欢的包管理器进行下载，等待下载完成...)
Which package manager would you like to use?
    npm
    pnpm
    > yarn

如果失败呢？

可以尝试修改本地hosts文件

1. 找到hosts文件，通常在C:\Windows\System32\drivers\etc\hosts
2. 右键属性，找到安全，找到Users编辑权限，把完全控制勾起
3. 复制粘贴到hosts最下面

# Nuxt3
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

4. 保存关闭，重新运行命令

简单介绍

初始化目录结构

运行命令：yarn dev|npm run dev，既可看到欢迎页面组件（NuxtWelcome），该组件是@nuxt/ui的一部分

加个 Src

初始化Nuxt项目的时候希望项目内容（如：页面、组件、静态资源 等）统一放在src文件夹内管理，所以需要创建src目录，把app.vue移入到src目录下，还需要修改nuxt.config.ts文件

export default defineNuxtConfig({
+   srcDir: './src',
    devtools: { enabled: true }
})

components 组件

组件名策略： 默认情况Nuxt自动导入components/目录中的所有组件，不需要import即可使用，组件名将基于它的路径、目录和文件名

如上图，组件命名为：<Header/>、<BaseAside/>、<Footer/>，如果文件名是index可以省略；与上级目录名相同可以（Header -> header.vue）省略

懒加载组件

如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件

如上图，组件<LazyBaseAside/>加了Lazy前缀就是懒加载组件，就会延迟加载组件代码

第三方Ui组件库

要不要参考官网的安装方式呢？Naive-Ui

1、安装

npm install naive-ui @css-render/vue3-ssr -D 或者 yarn add naive-ui @css-render/vue3-ssr -D

2、修改 nuxt.config.ts 配置

export default defineNuxtConfig({
    srcDir: './src',
    devtools: { enabled: true },
+   build: {
        transpile:
            process.env.NODE_ENV === 'production'
                ? ['naive-ui', 'vueuc', '@css-render/vue3-ssr', '@juggle/resize-observer']
                : ['@juggle/resize-observer']
    },
+   vite: {
        optimizeDeps: {
            include:
                process.env.NODE_ENV === 'development'
                    ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
                    : []
        }
    }
})

3、新增一个插件

在src下创建plugins文件夹，在plugins下创建一个naive-ui.ts文件，内容如下：

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
    if (process.server) {
        const { collect } = setup(nuxtApp.vueApp)
        const originalRenderMeta = nuxtApp.ssrContext?.renderMeta
        nuxtApp.ssrContext = nuxtApp.ssrContext || {}
        nuxtApp.ssrContext.renderMeta = () => {
            if (!originalRenderMeta) {
                return {
                    headTags: collect()
                }
            }
            const originalMeta = originalRenderMeta()
            if ('then' in originalMeta) {
                return originalMeta.then((resolvedOriginalMeta) => {
                    return {
                        ...resolvedOriginalMeta,
                        headTags: resolvedOriginalMeta['headTags'] + collect()
                    }
                })
            } else {
                return {
                    ...originalMeta,
                    headTags: originalMeta['headTags'] + collect()
                }
            }
        }
    }
})

4、页面中使用

<template>
    <div>
        <n-button type="success">
            我是按钮
        </n-button>
    </div>
</template>

<script setup lang="ts">
import { NButton } from 'naive-ui'
</script>

5、还有点小问题 github 链接，在src下创建plugins文件夹，在plugins下创建一个naive.server.ts文件，内容如下：

import {setup} from "@css-render/vue3-ssr";
import {defineNuxtPlugin} from "#app";

// 解决刷新时候的样式加载缓慢而看到原生的形态
export default defineNuxtPlugin((nuxtApp) => {
    const {collect} = setup(nuxtApp.vueApp);
    nuxtApp.ssrContext!.head.push({
        style: () => collect()
            .split('</style>')
            .map((block) => {
                const id = block.match(/cssr-id="(.+?)"/)?.[1]
                const style = (block.match(/>(.*)/s)?.[1] || '').trim()
                return {
                    ['cssr-id']: id,
                    innerHTML: style,
                }
            })
    })
});

重启

有可能报错了呢

报错原因：