nuxt3 踩坑之旅---与传统的vue项目不同之处

前言

大家好，我是你不会困，写代码就不会困，今天分享的是nuxt3 踩坑之旅---与传统的vue项目不同之处

Nuxt.js 内置了许多功能和插件，以简化 Vue.js 应用程序的开发。以下是一些常用的内置功能：

服务端渲染 (SSR): Nuxt.js 默认支持服务端渲染，可以生成用于搜索引擎优化（SEO）的静态 HTML，并在首次加载时提供更快的渲染速度。你可以使用 asyncData 或 fetch 方法在服务器端获取数据。
自动路由: Nuxt.js 根据文件系统的目录结构自动生成路由配置，你只需在 pages 目录下创建 Vue 组件，Nuxt.js 将会自动为其生成对应的路由。
静态文件服务: Nuxt.js 提供了一个静态文件服务，你可以将静态文件（如图片、样式表、JavaScript 文件等）放在 static 文件夹中，然后可以通过 / 访问这些文件。
布局组件: Nuxt.js 允许你创建全局的布局组件，使得你可以在不同的页面之间共享相同的布局结构。你可以在 layouts 目录下创建布局组件，并在页面组件中使用。
中间件: Nuxt.js 提供了中间件机制，允许你在页面渲染之前或之后执行一些逻辑。你可以使用中间件来进行身份验证、路由拦截、数据处理等操作。
插件系统: Nuxt.js 具有插件系统，允许你在应用程序中轻松添加第三方库或自定义功能。你可以在 plugins 目录中编写插件，并在配置文件中引入。

约定大于配置，所以很多东西都得去看文档，搜索引擎也没有多少可以得demo，

本文是记录nuxt3+vue3+ts+element plus的踩坑之旅

与vue项目的不同点

1.布局样式

在项目的根目录新建layouts目录，将其布局放在default.vue里面，由于我的项目头部在每一个页面都有，所以就在default.vue里面布局

头部组件代码

2.路由逻辑

约定好的路由在项目根目录下的pages，例如/home就是pages/home.vue或者是pages/home/index.vue，这样做的好处就是不用import

你还在为满屏的import头疼？在nuxt3项目里面，这种情况会有明显的改善

我这里就是/my 和 /示例

说到路由，那你肯定会好奇路由参数要怎么获取？

很好，很不错的问题

没错，你没有看错，直接使用nuxt内部的useRoute(),这得益于nuxt，很多东西都是不用import的，细心的同学就发现了我上面的组件是导入

没错，这就是没有根据规则去创建组件，然后需要导入组件去使用

my的页面新建一个componnets来存放组件，因为页面肯定不是一个vue文件就可以写完的，有些复杂的页面就需要进行拆分，所以这里就需要手动去import

当然你也可以在项目根目录下新建一个my文件去存放，这个根据个人或者是团队的开发习惯去规范好

3.自定义指令

在vue项目下，我们习惯自定好指令，通过v-xx指令去使用，用起来很舒服，nuxt项目也是可以，但是有一定的使用规则。

在项目根目录下新建plugins/directives/index.ts,

javascript 复制代码

import clickOutsideDirective from './click-outside'
import { defineNuxtPlugin } from '#app'
// 这里就是全局注册自定义指令
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('click-outside', clickOutsideDirective)
})