真正可行的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.rhkb.cn/news/218331.html

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

相关文章

虚幻学习笔记13—C++静态和动态加载

一、前言 我们在蓝图中可以很方便的添加各种需要的组件&#xff0c;那么在C代码中要如何实现呢。在代码中分静态和动态加载&#xff0c;而无论静态和动态&#xff0c;加载的内容有资源和资源类&#xff0c;资源类通常为带资源的蓝图类。 二、实现 在实现静态或动态加载时&…

科技云报道:从数据到生成式AI,是该重新思考风险的时候了

科技云报道原创。 OpenAI“宫斗”大戏即将尘埃落定。 自首席执行官Sam Altman突然被董事会宣布遭解雇、董事长兼总裁Greg Brockman辞职&#xff1b;紧接着OpenAI员工以辞职威胁董事会要求Altman回归&#xff1b;再到OpenAI董事会更换成员、Altman回归OpenAI。 表面上看&…

OpenHarmony关于修改系统横屏导致启动视频显示不全问题解决

前言 OpenHarmony源码版本&#xff1a;4.0release 开发板&#xff1a;DAYU / rk3568 前段时间写的设置OpenHarmony启动视频&#xff0c;在竖屏状态下是正常的&#xff0c;但是横屏状态下显示不全。 链接直达&#xff1a;OpenHarmony 设备启动Logo和启动视频替换指南-CSDN博…

Java EE 多线程之线程安全的集合类

文章目录 1. 多线程环境使用 ArrayList1. 1 Collections.synchronizedList(new ArrayList)1.2 CopyOnWriteArrayList 2. 多线程环境使用队列2.1 ArrayBlockingQueue2.2 LinkedBlockingQueue2.3 PriorityBlockingQueue2.4 TransferQueue 3. 多线程环境使用哈希表3.1 Hashtable3.…

优雅玩转实验室服务器(一)登录服务器

这篇文章更加偏向于使用python程序进行研究的朋友们 原料 Windows主机实验室Linux服务器&#xff08;可以访问互联网&#xff09;一点点耐心 step.0 windows terminal is all you need 别跟我说什么putty&#xff0c;什么winscp&#xff0c;我就是单推Win11自带的软件——win…

深度学习在人体动作识别领域的应用:开源工具、数据集资源及趋动云GPU算力不可或缺

人体动作识别检测是一种通过使用计算机视觉和深度学习技术&#xff0c;对人体姿态和动作进行实时监测和分析的技术。该技术旨在从图像或视频中提取有关人体姿态、动作和行为的信息&#xff0c;以便更深入地识别和理解人的活动。 人体动作识别检测的基本步骤包括&#xff1a; 数…

[已解决】uniapp内置插件,editor富文本报错(附quill.min.js、image-resize.min.js文件)

在使用uni-app运行内置插件editor时&#xff0c;无法输入内容&#xff0c;控制台报错 原因&#xff1a;查看官网得知&#xff0c;需动态引入quill.min.js、image-resize.min.js文件 解决方法&#xff1a; 1.下载quill.min.js、image-resize.min.js到项目static/eidtor文件中 链…

2024生化仪器与实验室装备创新发展论坛将于3月6日济南召开

2024生化仪器与实验室装备创新发展论坛 2024年3月6日 | 山东国际会展中心 一、会议介绍 近年来&#xff0c;制药及生物制药行业的高速成长&#xff0c;生化仪器与实验室装备作为科学研究的重要组成部分&#xff0c;同时也在不断的更新和升级。伴随生物制药、CRO等下游行业的…

js 数组 slice() 浅拷贝与sort()数组的排序

slice() slice()方法将从数组中浅拷贝指定开始位置和结束位置之间的数组元素到一个新的数组&#xff0c;并返回新数组。 结束位置不在浅拷贝的范围 [1, 2, 3, 4, 5].slice(2&#xff0c;3); 结果时 3 从数组第二位开始拷贝 &#xff0c;到第三位为止 注意返回内容是一个数…

超燃超欢乐!修仙喜剧动画《师兄啊师兄》第二季稳健开播

12月14日&#xff0c;备受瞩目的《师兄啊师兄》第二季终于稳健开播&#xff01;首播两集连放&#xff0c;同时第一季全13集限免&#xff0c;不仅便于新观众丝滑入坑&#xff0c;老观众也可以二刷重温&#xff0c;可以说是非常良心了&#xff01; 《师兄啊师兄》改编自人气网络小…

【云原生kubernets】Pod详解

一、Pod介绍 1.1.概念 Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行的State…

将 Github token 添加至远程仓库

将 Github token 添加至远程仓库后便于每次 push 重复输入的麻烦 首先,将已生成的 token 记录(注:生成后的 token 确认后便无法查看只能重新生成)并找到对应的项目 git 本地文件路径下 其次,将其与项目所关联,按如下格式配置即可 token 格式类似于 ghp_CAxxxxxxxxxxxxxxxxxGx5j…

【rabbitMQ】rabbitMQ控制台模拟收发消息

目录 1.新建队列 2.交换机绑定队列 3.查看消息是否到达队列 总结&#xff1a; 1.新建队列 2.交换机绑定队列 点击amq.fonout 3.查看消息是否到达队列 总结&#xff1a; 生产者&#xff08;publisher&#xff09;发送消息&#xff0c;先到达交换机&#xff0c;再到队列&…

微软Microsoft二面面试题分享通过总结(不是标准答案分享

误打误撞 我写的shitty代码 当年面试算法开发岗竟然通过了 Background 先说下背景&#xff0c;软件工程本科毕业之后&#xff0c;当年8月到北欧读两年制硕士。面试发生在当年的11月&#xff0c;微软哥本哈根&#xff0c;location在丹麦的哥本哈根lingby&#xff08;是不是这么…

【JavaEE】锁的策略

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…

vue中哪些数组的方法可以做到响应式

Vue2 中为什么直接通过数组的索引修改元素是不会触发视图更新 vue2 为什么不直接监听数组 Vue2 对于数组提供了一些变异方法 重写数组方法源码分析 定义拦截器将拦截器挂载到数组上面收集依赖 扩展&#xff1a;理解Vue2如何解决数组和对象的响应式问题 对复杂对象的处理 复杂对…

基于JSP+Servlet+Mysql的建设工程监管信息

基于JSPServletMysql的建设工程监管信息 一、系统介绍二、功能展示1.企业信息列表2.录入项目信息3.项目信息列表 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于JSPServlet的建设工程监管信息 项目架构&#xff1a;B/S架构 开发语言&#xff1a;…

ubuntu pycharm 死机,如何重启

1. 找出pycharm 进程的id 进入命令行&#xff1a; ps -ef 是查看当前运行的进程 值输入 ps -ef 会返回所有当前执行的进程&#xff0c;太多了&#xff0c;过滤一下&#xff0c;找到 pycharm : ps -ef | grep pycharm 2. 使用 kill -s 9 来杀死进程 如图所是&#xff0c;…

HTML基础标签

但实际上无论声明为中文还是英文都可以写&#xff0c;中文/英文 主要是浏览器在进行调用翻译功能的时候&#xff0c;会按照声明的语言来进行翻译。 标签语义&#xff1a; 标签的属性一般都是在第一个标签中定义该标签效果所拥有的属性。 即标签的作用是什么 <>标签功能…

美食大赛的题解

目录 原题描述&#xff1a; 题目描述&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 样例输入&#xff1a; 样例输出&#xff1a; 数据规模&#xff1a; 题目大意&#xff1a; 主要思路&#xff1a; 注&#xff1a; 代码&#xff1a; 原题描述&#xff1a…