- 2024-11-13NUXT3学习日记(一)
Nuxt3是一个基于Vue3的现代框架,用于构建服务器端渲染(SSR)和静态生成的应用程序。它提供了一种简化的方式来创建高性能的Vue应用,具有许多强大的功能和优点。以下是Nuxt3的一些主要应用和优点:一、应用场景服务器端渲染(SSR):Nuxt3可以轻松构建服务器端渲染的应用,这样
- 2024-10-27Nuxt3搭建的社区网站-弦圈
Nuxt.js是一个基于Vue.js的服务端渲染框架,相较于Vue的单页应用,Nuxt的SSR应用对SEO友好。然而因为服务端渲染的缘故,用Nuxt.js开发要比单纯Vue.js开发要艰难得多,一是奇怪的bug和报错;二是部分API只能在浏览器端调用,不能在服务端使用。如今经过六个月的艰难开发,我的第一个Nuxt
- 2024-10-22如何在 Nuxt3 中更改生产环境端口
在使用npmrunbuild命令构建您的项目后,如果需要更改应用程序在生产环境中的监听端口,请按照以下步骤操作:设置环境变量在.output/server目录下创建一个.env文件,并设置你希望使用的端口号:PORT=3001启动应用程序使用以下命令根据您的工作目录来启动应用程序:如果你位于
- 2024-10-14Nuxt3+PM2集群模式启动及勘误
起因之前写过一篇Nuxt3的文章,Nuxt3环境变量配置,用到了PM2,但是里面的一些配置存在问题,最近有空又验证了一下,这里做一个勘误。问题PM2的启动配置中有一项是exec_mode,默认是fork,另一个可选值是cluster,fork是单进程模式,cluster是多进程模式,也就是常说的集群模式。最早开始
- 2024-09-07Nuxt3入门:过渡效果(第5节)
你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。Nuxt利用Vue的<Transition>组件在页面和布局之间应用过渡效果。一、页面过渡效果你可以启用页面过渡效果,以便对所有页面应用自动过渡效果。nuxt.config.jsexportdefaultdefineNuxtConfig({app:{pageTran
- 2024-09-03Mac 搭建Nuxt3 项目避坑全过程
问题描述依照官方文档给出的命令npxnuxi@latestinit<项目名称>直接运行是无法执行成功的,原因DNS污染问题,具体为什么会被污染,我也不知道,就是网络上查到的,执行结果如下图解决方法查看域名raw.githubusercontent.com解析的IP地址标题配置Host文件(有很多中方式修
- 2024-08-27nuxt3项目自定义环境变量,typescript全局提示
最近使用nuxt3框架来写项目,其中有一点就是typescript语法提示让人闹心,使用vscode编辑器,如果有语法提示进行编码,工作效率可以提升一个档次。本篇文章说的就是如何在vscode中使用nuxt3框架,自定义环境变量,支持typescript语法提示。列出当前使用的环境版本node#21.4.0
- 2024-08-27Nuxt3 全局变量接口前缀全局配置,全局方法,全局状态管理
接口前缀全局配置,全局变量1.像api前缀这类的全局变量一般配置在nuxt.config.ts文件中。如下:nuxt.config.ts可以在public下定义全局变量,且public下的变量可以在客户端和服务端使用在其他任意vue或者js、ts文件中,可通过以下方式获取变量const{public:{apiBase}}=u
- 2024-08-21Nuxt3 使用animate.css来实现页面切换过渡效果
首先,如果两个page分别在不同的layout下,是无法使用pageTransition来实现切换效果的,这时候需要使用layoutTransition来实现切换效果这里采用npmpackage的方式安装animate.css,当然采用cdn的形式也是可以的npmianimate.css然后在app.vue中导入<scriptsetup>import"anima
- 2024-08-20Nuxt3【过渡】2024最新版 (含页面过渡、布局过渡、全局过渡、局部过渡、动态过渡、禁用过渡等)
全局布局过渡layoutTransitionnuxt.config.ts中exportdefaultdefineNuxtConfig({app:{layoutTransition:{name:'layout',mode:'out-in'}},})app.vue中需添加样式.layout-enter-active,.layout-leave-active{transition:all0.4s;
- 2024-08-09Nuxt3 axios封装 使用axios接口请求
一、先安装axiosnpminstalladdaxios封装请求request.ts文件importaxiosfrom'axios'import{ElMessage,Message}from"element-plus"import{getToken}from'./token.js'constservice=axios.create({baseURL:'/api',//
- 2024-08-08vue3(nuxt3)+Aliplayer播放器进行直播播流
前言: 上一篇讲到使用自定义的一个播放器去进行播流进行观看直播,由于之前都是自己研发的,服务器不是特别好,所以决定使用阿里的推流以及阿里的播放器去进行拉流也更加的适配吧,至少后面出现问题可以有文档看比较完善实践 1.这里的话先把官方文档的地
- 2024-08-07部署nuxt3.js到nginx的过程
1.先安装好nodejs的版本我centos7版本,最后发现支持nodejs-v16.20版本在[sytyuser1@syit-dev-linux-01node]$pwd/usr/local/node在 /usr/local/node 目录下载wgethttps://nodejs.org/dist/latest-v16.x/node-v16.20.2-linux-x64.tar.gz解压 tar-zxvf node-v16.20.
- 2024-07-26Nuxt3的plugins使用有哪些?
Nuxt3是一个服务端渲染(ssr)框架在项目中,(1)有一些全局使用方法,不想每次使用都要单独导入,而不想像平时的框架项目,总是要export,然后频繁的import,现在nuxt3可以用plugins的provide注入全局方法,但是其实不同于Vue的provide Nuxt的provide:可注入全局方法,解决全局方法多处导
- 2024-07-10Nuxt框架中内置组件详解及使用指南(五)
title:Nuxt框架中内置组件详解及使用指南(五)date:2024/7/10updated:2024/7/10author:cmdragonexcerpt:摘要:本文详细介绍了Nuxt框架中和组件的使用方法与配置,包括安装、基本用法、属性详解、示例代码以及高级功能如事件处理、自定义图片属性和图片格式回退策略。同时,还
- 2024-07-07帮公司搭了个Nuxt3项目框架
最近公司立项了一个新项目,因为是toC的,所以对SEO是有较高需求的,由于公司前端技术栈统一用的VUE,顺理成章的就选择了nuxt这个全栈框架。项目立项之后我就被安排了负责前端项目框架的搭建,从搭建过程的体验来看,技术栈切换到nuxt还是有门槛的,所以这里我就把经过我打磨好的nuxt完
- 2024-07-05Nuxt3 的生命周期和钩子函数(十一)
title:Nuxt3的生命周期和钩子函数(十一)date:2024/7/5updated:2024/7/5author:cmdragonexcerpt:摘要:本文详细介绍了Nuxt3中几个关键的生命周期钩子和它们的使用方法,包括webpack:done用于Webpack编译完成后执行操作,webpack:progress监听编译进度,render:response和render
- 2024-07-04Nuxt3 的生命周期和钩子函数(十)
title:Nuxt3的生命周期和钩子函数(十)date:2024/6/30updated:2024/6/30author:cmdragonexcerpt:摘要:本文详细介绍了Nuxt3框架中的五个webpack钩子函数:webpack:configResolved用于在webpack配置解析后读取和修改配置;webpack:compile在编译开始前调用,可修改编译选项;webpa
- 2024-07-03Nuxt3 的生命周期和钩子函数(九)
title:Nuxt3的生命周期和钩子函数(九)date:2024/7/3updated:2024/7/3author:cmdragonexcerpt:摘要:本文介绍了Nuxt3中与Vite相关的五个生命周期钩子,包括vite:extend、vite:extendConfig、vite:configResolved、vite:serverCreated和vite:compiled,展示了如何在每个钩子中
- 2024-07-02Nuxt3 的生命周期和钩子函数(八)
title:Nuxt3的生命周期和钩子函数(八)date:2024/6/30updated:2024/6/30author:cmdragonexcerpt:摘要:本文介绍了Nuxt3框架中的一些重要生命周期钩子,如prepare:types用于自定义TypeScript配置和类型声明,listen用于在开发服务器启动时注册自定义事件监听器,schema:ex
- 2024-07-02Nuxt3 的生命周期和钩子函数(七)
title:Nuxt3的生命周期和钩子函数(七)date:2024/6/30updated:2024/6/30author:cmdragonexcerpt:摘要:文章阐述了Nuxt3中Nitro生命周期钩子的使用,如nitro:config自定义配置、nitro:init注册构建钩子、nitro:build:before/after调整构建设置及处理公共资产、prerend
- 2024-07-01Nuxt3 的生命周期和钩子函数(七)
title:Nuxt3的生命周期和钩子函数(七)date:2024/6/30updated:2024/6/30author:cmdragonexcerpt:摘要:文章阐述了Nuxt3中Nitro生命周期钩子的使用,如nitro:config自定义配置、nitro:init注册构建钩子、nitro:build:before/after调整构建设置及处理公共资产、prerender:rou
- 2024-06-23深入探索 Nuxt3 Composables:掌握目录架构与内置API的高效应用
title:深入探索Nuxt3Composables:掌握目录架构与内置API的高效应用date:2024/6/23updated:2024/6/23author:cmdragonexcerpt:摘要:“本文深入探讨了Nuxt3Composables,重点介绍了其目录架构和内置API的高效应用。通过学习本文,读者将能够更好地理解和利用Nuxt3Co
- 2024-06-23深入探索 Nuxt3 Composables:掌握目录架构与内置API的高效应用
title:深入探索Nuxt3Composables:掌握目录架构与内置API的高效应用date:2024/6/23updated:2024/6/23author:cmdragonexcerpt:摘要:“本文深入探讨了Nuxt3Composables,重点介绍了其目录架构和内置API的高效应用。通过学习本文,读者将能够更好地理解和利用Nuxt3Composab
- 2024-06-19nuxt3+vue3+vite+TS实现国际化
前言博主最近打算用Nuxt3重构了自己SSR博客,打算添加国际化功能,众所周知,实现国际化已是一个很常见的功能。用户可以根据自己的喜好,设置页面的自己合适的语言,从而实现国际化浏览。这样用户体验度会大大提升。博客用的nuxt3+vue3+vite+TS实现国际化,国际化用的vue-i18n,下面我给大