上海网站建设 知名做,做网站 写脚本是什么,朝阳区网站建设公司,网站的前端开发终于到了总结经验的时候了#xff0c;这绝对是全网唯一、完全真正可行的干货。
在我看来#xff0c;知识就是要拿来分享的#xff0c;分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位#xff0c; 因为我在csdn写文章最主要的目的是为了记录和总…终于到了总结经验的时候了这绝对是全网唯一、完全真正可行的干货。
在我看来知识就是要拿来分享的分享给他人也是在提高自己。我绝对不会搞什么订阅或者vip专栏来搞钱坑害各位 因为我在csdn写文章最主要的目的是为了记录和总结。
而且靠这种卖文章的都发不了财也是没有大智慧的表现所以知识星球这些东西都是扯淡的
付费的情况我只认同一对一服务否则其他的基本都是在骗钱
csdn别的我不认同但这句话我还是赞同的写作是为了更好的思考更多的写作和总结是为了更好的思考!
完全赞同
我不会像有的人靠华伪od垃圾题库混博客骗钱就这种没营养的东西还能还发了一年多真是可笑
因为代码组织能力和设计思想是永远高于算法的
而且包括力扣这类的题库充其量只能算是题海战术完全就是毒害大脑的垃圾
这跟应试教育的蠢材没有什么区别
算法能力跟背题库有个毛的关系 linux林纳斯背过题库吗过去任何一门计算机语言发明人背过题库吗
你要想真正提升整体功力就得学会怎么去思考而不是去做题
好了题外话扯多了现在说正题
如果你手上有一个现成的vue3项目现在要实现服务端渲染应该怎么做
你有两种选择
1. 通过vue-server-renderer来改造 这个我会单独再写一遍文章
2. 迁移到nuxt3框架
第一种方法相当要简单一些但是nuxt3迁移真的是坑巨多多到你想放弃
我现在来讲讲vue3迁移到nuxt3的关键点
首先前提是node版本必须大于18ide选择vscode(安装volar插件有自动提示功能)。
vscode号称宇宙第一ide不是白叫的可是我仅仅用它写前端~
1. 首先安装nuxt3: npx nuxilatest 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?hlen
Nuxt3-01-了解同构渲染(SSR)丨水哥澎湃_哔哩哔哩_bilibili
