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

前言

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

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

  1. 服务端渲染 (SSR): Nuxt.js 默认支持服务端渲染,可以生成用于搜索引擎优化(SEO)的静态 HTML,并在首次加载时提供更快的渲染速度。你可以使用 asyncDatafetch 方法在服务器端获取数据。
  2. 自动路由: Nuxt.js 根据文件系统的目录结构自动生成路由配置,你只需在 pages 目录下创建 Vue 组件,Nuxt.js 将会自动为其生成对应的路由。
  3. 静态文件服务: Nuxt.js 提供了一个静态文件服务,你可以将静态文件(如图片、样式表、JavaScript 文件等)放在 static 文件夹中,然后可以通过 / 访问这些文件。
  4. 布局组件: Nuxt.js 允许你创建全局的布局组件,使得你可以在不同的页面之间共享相同的布局结构。你可以在 layouts 目录下创建布局组件,并在页面组件中使用。
  5. 中间件: Nuxt.js 提供了中间件机制,允许你在页面渲染之前或之后执行一些逻辑。你可以使用中间件来进行身份验证、路由拦截、数据处理等操作。
  6. 插件系统: 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)
})
相关推荐
范文杰3 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI6 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端