真正可行的vue3迁移到nuxt3方法(本人亲测,完全避坑)

终于到了总结经验的时候了,这绝对是全网唯一、完全真正可行的干货。

在我看来,知识就是要拿来分享的,分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位, 因为我在csdn写文章最主要的目的是为了记录和总结。

而且靠这种卖文章的都发不了财,也是没有大智慧的表现,所以知识星球这些东西都是扯淡的!

付费的情况,我只认同一对一服务,否则其他的基本都是在骗钱!

csdn别的我不认同,但这句话我还是赞同的:写作是为了更好的思考!更多的写作和总结,是为了更好的思考!

完全赞同!

我不会像有的人靠华伪od垃圾题库混博客骗钱,就这种没营养的东西还能还发了一年多,真是可笑!

因为代码组织能力和设计思想是永远高于算法的!

而且包括力扣这类的题库充其量只能算是题海战术,完全就是毒害大脑的垃圾!

这跟应试教育的蠢材没有什么区别!

算法能力跟背题库有个毛的关系! linux林纳斯背过题库吗!过去任何一门计算机语言发明人背过题库吗?!

你要想真正提升整体功力,就得学会怎么去思考,而不是去做题!

好了,题外话扯多了,现在说正题

如果你手上有一个现成的vue3项目,现在要实现服务端渲染,应该怎么做?

你有两种选择:

1. 通过vue-server-renderer来改造 (这个我会单独再写一遍文章)

2. 迁移到nuxt3框架

第一种方法相当要简单一些,但是nuxt3迁移真的是坑巨多,多到你想放弃!

我现在来讲讲vue3迁移到nuxt3的关键点:

首先前提是node版本必须大于18,ide选择vscode(安装volar插件:有自动提示功能)。

vscode号称宇宙第一ide,不是白叫的,可是我仅仅用它写前端~

1. 首先安装nuxt3

npx nuxi@latest init <project-name>

 一条命令完成,上面可能会报错找不到yarn之类的,因为有可能你是nvm管理node的。

这个不用管。  因为项目初始化完成以后,你可以手动yarn install安装依赖

2. vue3代码的迁移:

    重点来了:nuxt3没有src目录! 

     所以你需要把vue3原始src目录下的内容拷贝到nuxt3项目的根目录下

    但是前提是你原始项目的结构是:

     分为视图/页面和组件两大类,也就是有views/pages和components目录这种类型的。

    如果不是这种结构,nuxt3你没戏了,你只能按照我的第一种方法去做ssr改造。

   所以,你原来的views目录里面的文件要拷贝到nuxt3的pages目录,components目录原样拷贝即可

    额外注意点:

     a. public目录下一定不能有index.html文件,否则app.vue没法挂载!!!

     b. css/less/scss文件必须拷贝到assets目录,图片文件也必须拷贝到assets目录下

3. 路由的处理:

    nuxt3是文件路由模式不需要手动定义路由,不需要手动引入页面组件绑定路由,所以不需要      router.js文件。

 什么意思? 就是pages目录下的文件,nuxt3都会自动以文件名创建一个路由,文件的目录层级就是路由表现形式。

   例1:如果pages目录下有个user.vue文件,那nuxt3就会自动生成一个/user路由,该路由会自动跳转到user.vue定义的页面

  例2: 如果pages目录下有个这样的目录: pages/user/admin.vue

           这代表nuxt3就会自动生成一个/user/admin路由,该路由指向admin.vue文件

  例3 : 动态路由的处理: 用[id]的文件名表示动态路由

             比如下面这个例子:path: '/recommend/:id',

此时需要在pages目录下新建一个recommend目录然后里面新建一个[id]文件,文件的内容就是动态路由所绑定的页面文件album.vue, 换句话说,[id].vue就是原来的album.vue  

  

nuxt3这种设计的目的是为了提高效率,减少开发者的工作,但对于新手可能会很不适应。

你需要多多体会,在最小化环境中多多练习几次,加深理解

   关于路由的最后一个重点:vue3的router-view是可以继续沿用的,不需要切换到nuxtPage!

4. 关于components组件

    nuxt3的设计思想是: 你components目录下的组件,nuxt3会自动全局注册,你使用时直接用组件名就可以了,不需要再单独引入

使用规则: 用驼峰或者中横杆命名方式引入,

但是component目录名尽量不要包含中横杆,以免使用组件名时跟nuxt3冲突

举例如下:

重大坑点: app.vue页面一定不要手动引入组件,否则onMounted生命周期钩子会失效!那么html没法获取后端数据,nuxt3就没得玩了!

5. 关于main.ts的文件的处理。

        我知道你们很多人一定都会有这个问题,所以迁移到一个新的框架本身是一件很痛苦的过程,因为有太多新的规则你不了解!也不知道怎么做

   这个问题是通过nuxt3 plugins插件机制来解决的

   main.ts说白了就是程序的初始化,而nuxt3的plugins也正是在nuxt3初始化是完成的事情。

  你需要在nuxt3根目录下新建一个plugins目录,然后在该目录下新建一个ts文件,名称随意,plugins目录下的所有文件都会被nuxt3启动时自动加载

 你可以把你原来的main.ts文件的内容拷贝到这个新建的ts文件里面:

如下所示:

从上面的对比可以看到: createApp, import app 还有路由这些在nuxt3都可以删掉了,也不需要app挂载。

这里主要保留了vuex还有其他个性化配置的初始化

nuxt3通过defineNuxtPlugin定义插件,入参是nuxtApp,通过nuxtApp.vueApp获取vue实例

然后将这些个性化的配置绑定到vue实例,

以下是插件文本示范,具体取决于你原始main.ts的内容

import { setupStore } from "@/store";

import { setupLazy } from "@/configs/lazy";

import { setupSongs } from "@/configs/songs";

import { setupDirective } from "@/directives";
 

export default defineNuxtPlugin((nuxtApp) => {

   const app = nuxtApp.vueApp;

  setupStore(app);  // 这里相当于app.use(store)

  setupLazy(app);

  setupDirective(app);

  setupSongs();
 

});
 

 setupStore(app);   这里相当于app.use(store),因为setupStore是这样定义的

7. 关于状态管理:

    nuxt3推荐使用Pinia,我他妈代码都用vuex写了,还换个锤子Pinia, 不换!

   前端真是为了卷而卷,写了那么多无用的轮子就是为了卷,彻底没救了!

   解决办法: 先注册vuex(见上面第6条plugins配置)

    使用时 :

       import { useStore } from 'vuex' 

      const store = useStore();

8. 关于依赖:不需要vue-cli和vite这些依赖,nuxt3内置vite和打包编译工具。

   标准依赖如下,其他的依赖根据你自己的项目自行调整:

"devDependencies": {

    "@nuxt/devtools": "latest",

    "@nuxt/types": "^2.17.2",  

    "less": "^4.1.2",

    "less-loader": "^10.2.0",

    "nuxt": "^3.8.2",

    "nuxt-proxy-request": "^1.7.0",

    "vue": "^3.3.10",        

    "@vueuse/core": "^8.2.0",   

      "axios": "^1.6.2",

    "core-js": "^3.21.1",

    "vuex": "^4.0.2"

  },

9. 关于首页 : page目录下必须有一个index.vue文件,否则会报404错误

,而index.vue文件的内容就是你原来项目的首页文件的内容,

10. 关于全局css样式和css变量的处理:

在nuxt.config.ts中中加入如下配置,以下仅是less的示例,具体情况根据你项目自行调整

vite: {css: {preprocessorOptions: {less: {additionalData: `@import "@/assets/styles/variables.less";@import "@/assets/styles/mixins.less";`,},},},},

注意: 样式文件必须放在assets目录下

           additionalData配置下如有多个@import配置项,需要讲整体配置用反引号``括起来

12. 关于图片路径的处理

     不能使用require引入图片: 否则会报错: url malformed或者require is not defined

      建议使用import 图片变量 from '@/assets/images/xxx.png',

     然后在img标签的src使用该图片变量

    具体参考我的这篇文章:解决nuxt3引入图片报错:ReferenceError: require is not defined-CSDN博客

13. document not defined和xxx is not a function问题的解决:

     问题本质是有dom api需求的代码打包到了ssr环境, 也就是node环境

  解决办法:

     1. 使用ClientOnly标签 

     2. 使用if(process.client) {}判断,强制代码不要打包到ssr环境。

具体参考我的以下文章:

   解决nuxt3生产打包以后运行服务器报错: BScroll.use is not a function-CSDN博客

 解决nuxt3中scroll组件渲染报错:document is not defined-CSDN博客

解决nuxt3子路由router-view中出现的document not defined错误-CSDN博客

12. 解决类型报错:The requested module xxx does not provide an export named xxx的方法:

  解决办法: import { type xxx } from 'vue'

具体参考我的这篇文章:

解决nuxt3报错:The requested module xxx does not provide an export named ‘PropType‘-CSDN博客

13. 关于api的代理: nuxt.config.ts增加以下配置

  modules: ["nuxt-proxy-request"],

  proxy: {

    options: [

      {

        target: "http://127.0.0.1:3600", // 代理目标地址

        pathFilter: ["/api"],   // api前缀       

           pathRewrite: {

          // "^/api": "",   // 路径重写为可选,视具体情况而定

        },

      },

   

    ],

  },

     

      写在最后: 你要真正了解ssr,不能仅满足于以上这些步骤,而是要深刻理解其中的原理。

ssr并不是服务端渲染就完事了,它还是会有csr的存在,所以还需要了解hydration补水操作。

什么意思: ssr首先是服务端绘制出整个dom结构(这一部分工作在node环境),也就是页面骨架,后续的动态渲染部分仍然由csr浏览器端接管,所以也叫hydration补水操作

所以,ssr准确来讲应该是同构渲染,打包分为server-bundle和client-bundle

因此服务端渲染这个叫法并不准确,那是最早jsp时代前后端一体化的玩法。

ssr实际包括了nodejs服务端绘制dom结构 + 浏览器客户端js渲染两个部分

建议你看一下下面这两篇文章和视频,讲的都非常好,有助于你理解ssr

https://web.dev/articles/rendering-on-the-web?hl=en

Nuxt3-01-了解同构渲染(SSR)丨水哥澎湃_哔哩哔哩_bilibili

     

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/225768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenJDK十几种发行版中强烈推荐的发行版:Adoptium Eclipse Temurin和Amazon Corretto

Adoptium Eclipse Temurin官网地址&#xff1a;Home | Adoptium 支持及维护它的厂家&#xff1a; 说明&#xff1a;它的前身是著名的AdoptOpenJDK&#xff0c;更新到jdk16后就停止更新了&#xff0c;因为AdoptOpenJDK移交给Eclipse基金会后改名为&#xff1a;Adoptium Eclipse…

【开题报告】基于SpringBoot的煤炭企业安全宣传学习平台的设计与实现

1.选题背景 煤炭企业作为我国能源行业的重要组成部分&#xff0c;承担着国民经济的支撑和推动作用。然而&#xff0c;煤炭生产过程中存在较高的安全风险&#xff0c;煤矿事故频发&#xff0c;给人员生命财产安全带来严重威胁&#xff0c;也给社会稳定和经济发展带来不利影响。…

多线程 (下) - 学习笔记

常见锁策略 乐观锁和悲观锁 悲观锁 总是假设最坏的情况, 每次去拿数据的时候都会认为会被别人修改, 因此会上锁, 防止数据在使用过程中被别的线程修改, 乐观锁 假设数据一般情况下不会产生并发冲突,因此在拿数据,操作数据的过程中不加锁, 而在数据进行提交更新的时候, 才会正…

LeetCode day24

LeetCode day24 今天主打一个快乐happy(▽ʃ♡ƪ)&#xff0c;主要是今天写哈夫曼树被经典文件读取坑麻了&#xff08;为啥绝对路径能读取&#xff0c;相对不行。罢了&#xff09; 一个中等题&#xff0c;但是咋感觉很小学捏。。。 2177. 找到和为给定整数的三个连续整数 相…

C与C++编程语言的区别和联系

一、引言 C和C是两种广泛使用的编程语言&#xff0c;它们都在软件开发领域有着广泛的应用。虽然C是从C语言演化而来的&#xff0c;但两者之间存在一些重要的区别和联系。本文将详细介绍这两种编程语言的相同点和不同点&#xff0c;并通过实际例子进行说明。 二、C与C的相同点 …

RocketMq常见问题

如何保证消息不丢失? 产生丢失消息的节点主要有以下几点 生产者发到brokerbroker把消息从缓存写入磁盘breker同步到从节点消费者消费消息消息积压太多, 会删除历史消息, 这里不会校验消息有没有消费 解决: 生产者同步发送消息, 如果发送失败, 写重试逻辑, 如果重试多次还失…

机器学习笔记 - 了解学习率对神经网络性能的影响

一、简述 深度学习神经网络使用随机梯度下降优化算法进行训练。学习率是一个超参数,它控制每次更新模型权重时响应估计误差而改变模型的程度。学习率值太小可能会导致训练过程过长并可能陷入困境,而值太大可能会导致过快地学习次优权重或训练过程不稳定。 配置神经网络时,学…

基于Java SSM框架实现抗疫医疗用品销售系统项目【项目源码+论文说明】

基于java的SSM框架实现抗疫医疗用品销售系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;抗疫医疗用品销售平台当然也不能排除在外。抗疫医疗用品销售平台是以实…

微服务黑马头条(简略笔记)

Linux中nacos的拉取安装 拉取naocs镜像&#xff1a;docker pull nacos/nacos-server:1.2.0创建容器&#xff1a;docker run --env MODEstandalone --name nacos --restartalways -d -p 8848:8848 nacos/nacos-server:1.2.0访问地址&#xff1a;http://192.168.200.130:8848/n…

【MySQL】之联合索引与最左匹配原则

前言&#xff1a; 最左匹配原则在我们 MySQL 开发过程中和面试过程中经常遇到&#xff0c;为了加深印象和理解&#xff0c;我在这里把 MySQL 的最左匹配原则详细的讲解一下&#xff0c;包括它的原理以及是否导致索引失效的场景。 在讲解 MySQL 的最左匹配原则之前&#xff0c;…

管理类联考——逻辑——真题篇——按知识分类——综合推理

文章目录 2023真题(2023-29)-数量关系模型真题(2023-31-32)-综合推理-匹配-数量假言匹配模型-数量假言模型:题干数量加假言,数量关系优先算;假言命题做串联,易出矛盾和二难。真题(2023-37-38)-综合推理-数量假言匹配模型-数量假言模型:题干数量加假言,数量关系优先…

深入理解LightGBM

1. LightGBM简介 GBDT (Gradient Boosting Decision Tree) 是机器学习中一个长盛不衰的模型&#xff0c;其主要思想是利用弱分类器&#xff08;决策树&#xff09;迭代训练以得到最优模型&#xff0c;该模型具有训练效果好、不易过拟合等优点。GBDT不仅在工业界应用广泛&#…

宣布全面推出适用于 macOS 的 Amazon EC2 M2 Pro Mac 实例

即日起&#xff0c;Amazon Elastic Compute Cloud (Amazon EC2) M2 Pro Mac 实例现已全面推出 (GA)。在为 Apple 平台&#xff08;例如 iOS、macOS、iPadOS、tvOS、watchOS、visionOS 和 Safari&#xff09;构建和测试应用程序时&#xff0c;这些实例的性能比现有的 M1 Mac 实例…

http正向代理测试,nginx反向代理中转正向代理服务器

有3台服务器如下&#xff1a; 192.168.111.201&#xff08;反向代理到正向代理服务器&#xff09; 192.168.111.202&#xff08;正向代理服务器&#xff09; 192.168.111.203&#xff08;目标WEB系统&#xff09; 防火墙网络策略如图所示: 1、192.168.111.200 只能访问 192.168…

grep用法详解

grep用法详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 深入解析grep命令&#xff1a;轻松搜寻文本&#xff0c;提高程序猿效率 在程序猿的日常工作中&…

Python小技巧2:在同一行打印多个元素

在Python代码中&#xff0c;如果我们想要打印一条日志或者一个元素。一般会使用如下语句&#xff1a; print("this is end!") #打印字符串&#xff1a;this is end!print(i) #打印出变量i的值 而此时&#xff0c;如果想打印两个元素&#xff0c;一般来说&#xff0…

配置802.1x认证

实验目的&#xff1a; 某公司拥有两个部门&#xff0c;市场部和人事部门&#xff0c;市场部和人事部的IP地址分别为10.1.11.0/24、10.1.21.0/24两个IP网段。市场部属于vlan11&#xff0c;人事部属于vlan21。现在需要在SW2上配置802.1x认证&#xff0c;实现终端用于只有认证成功…

一句话生成 3D 人脸资产|ChatAvatar 角色生成 AI 登陆 Cocos

近几个月以来&#xff0c;AIGC 一路高歌猛进&#xff0c;让我们见证了一场行业革命。 然而 AIGC 在 3D 资产领域却仍是业内的难题&#xff0c;少有突破。 小编今天给大家推荐一个 3D 角色 AIGC 利器 ChatAvatar。它可以算是 3D AIGC 领域的一匹黑马&#xff0c;走在了领域的前沿…

Unity中Shader URP最简Shader框架(整理总结篇)

文章目录 前言一、精简 ShaderGraph 所有冗余代码后的最简 URP Shader二、我们来对比一下 URP Shader 与 BuildInRP Shader 的对应关系 与 区别1、"RenderPipeline""UniversalPipeline"2、面片剔除、深度测试、深度写入、颜色混合 和 BRP 下一致3、必须引入…

QWebEngineView 透明色 设置白屏闪烁的问题 已解决

在项目开发中。由于qt5.15 升级到qt6.5 不知道因为什么&#xff0c;QWebEngineView 加载出现白屏&#xff0c; 网上大神给的方案 五花八门&#xff0c;没有一个解决问题。 代码 旧代码QWebEngineView* pWebEngineView new QWebEngineView();//pWebEngineView->page()->…