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)
})
相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军5 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军5 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发6 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中6 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron