一 、首先创建nuxt3项目

1、npx nuxi init nuxt-app //nuxt-app 是我们的项目名称n2、yarn installn3、yarn dev or npm run dev

如图：

创建nuxt3项目

二、运行效果

项目结构

运行效果

三、重构我们的项目结构

项目文件划分：

1、根目录创建assets文件存放我们的静态资源文件。例如：css、images、js

2、根目录创建components文件存放我们的组件

3、根目录创建layouts存放我们的整体布局文件。例如：头部、底部、主题body

4、根目录创建plugins存放我们的插件

5、根目录创建utils存放我们的自定义js 或 ts 文件

6、根目录创建pages文件存放我们的页面

如图：

修改后的文件结构

五、在layout中创建我们的布局组件，默认命名default.vue

<template>n <div>n <h3>我是头部</h3>n </div>n n <!-- 主题内内容-->n <div>n <!-- 使用插槽-->n <slot />n </div>n n <div>n <h3>我是底部</h3>n </div>n</template>nn<script lang="ts">nexport default {n name: "default"n}n</script>nn<style scoped>nn</style>

六、pages新建首页入口文件index.vue

<template>n <h3>你好</h3>n</template>nn<script lang="ts">nexport default {n name: "index.vue"n}n</script>nn<style scoped>nn</style>

七、修改app.vue根组件

//修改之前 n<template>n <div>n <NuxtWelcome />n </div>n</template>nn//修改之后n<template>n <main>n <NuxtPage />n </main>n</template>nn<style lang="scss">nn</style>n

注意：到目前为止我们的效果图如下：

效果图并未载入default.vue布局

只是显示了pages下index.vue的内容 - 你好，此时我们就需要改动我们的index.vue内容。如下：最外层包裹<NuxtLayout></NuxtLayout>

<template>n <NuxtLayout>n t <h3>你好</h3>nt</NuxtLayout>n</template>nn<script lang="ts">nexport default {n name: "index.vue"n}n</script>nn<style scoped>nn</style>

此时：我们的布局组件加载完毕，运行效果如下：

最终运行效果

目前为止，我们的整体项目搭建已经构建完毕，接下来我们需要引入我们的UI组件ElemeentPlus,帮助我们快速开发我们的项目，提高开发效率。

我们下次见来引入UI组件并配置黑暗模式