在我看来，知识就是要拿来分享的，分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位， 因为我在csdn写文章最主要的目的是为了记录和总结。
而且靠这种卖文章的都发不了财，也是没有大智慧的表现，所以知识星球这些东西都是扯淡的！
付费的情况，我只认同一对一服务，否则其他的基本都是在骗钱！
csdn别的我不认同，但这句话我还是赞同的：写作是为了更好的思考！更多的写作和总结，是为了更好的思考!
完全赞同！
我不会像有的人靠华伪od垃圾题库混博客骗钱，就这种没营养的东西还能还发了一年多，真是可笑！
因为代码组织能力和设计思想是永远高于算法的！
而且包括力扣这类的题库充其量只能算是题海战术，完全就是毒害大脑的垃圾！
这跟应试教育的蠢材没有什么区别！
算法能力跟背题库有个毛的关系！ linux林纳斯背过题库吗！过去任何一门计算机语言发明人背过题库吗？！
你要想真正提升整体功力，就得学会怎么去思考，而不是去做题！
好了，题外话扯多了，现在说正题
如果你手上有一个现成的vue3项目，现在要实现服务端渲染，应该怎么做？
你有两种选择：
1. 通过vue-server-renderer来改造 （这个我会单独再写一遍文章）
2. 迁移到nuxt3框架
第一种方法相对要简单一些，但是nuxt3迁移真的是坑巨多，多到你想放弃！
我现在来讲讲vue3迁移到nuxt3的关键点：
首先前提是node版本必须大于18，ide选择vscode(安装volar插件：有自动提示功能)。
vscode号称宇宙第一ide，不是白叫的，可是我仅仅用它写前端~
- 首先安装nuxt3:
npx nuxi@latest init
一条命令完成，上面可能会报错找不到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. 关于vue3 main.ts的文件的处理。
我知道你们很多人一定都会有这个问题，所以迁移到一个新的框架本身是一件很痛苦的过程，因为有太多新的规则你不了解！也不知道怎么做
nuxt3是没有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的示例，具体情况根据你项目自行调整
css: ["@/assets/styles/index.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使用该图片变量
最后
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。
