干货
本文主要讲怎么用stackblitz安装Nuxt3, 如果有做过的可以绕道
与杨村长
之前没有学过ssr相关的东西,前端做了近4年时间了了,也曾学习了半年开课吧的<全栈工程师>,学习全栈拓展了我的视野, 知道了许多平常接触不到的东西, 但仍然觉得自己短板挺多,认识村长杨老师, 这是这段经历, 最近听村长介绍了nuxt项目,用全新技术栈搭建, 我觉得以后肯定会运用很广
我认为nuxt3需要学习的优势:
- 服务端渲染, 适合搜索引擎爬取, 可以做一些需要大力推广的项目
- 速度快, 尤其对于大工程, 本人之前做过一个相对大点的项目, 那加载速度实在不敢恭维, 由于前端还夹杂着一些复杂的逻辑运算, 所以这类工程特别适合用nuxt进行重构, 毕竟每个网页前端空间就100M, 又要做渲染,又要做逻辑运算, 就造成了打开页面慢的困境, Nuxt3走起, 那么这个问题将不复存在.
一次小惊喜
至于本地怎么装nuxt3我就不赘述了, 因为许多小伙伴都已经有写这个过程了
这次安装过程的小惊喜是git里面所有项目都能在远程stackblitz中跑起来,存档到当中,之前我需要看开源项目, 首先都是下载到本地, 然后安装依赖,最后才是熟悉代码, 但是接触stackblitz后,这个过程直接就在远程完成了, 而且快得很,也不占用本地的存储打开环境就是线上的vscode
我本地node版本是16,但是跑起来就是报500, 欢迎页面都见不着, 至今都不知道是哪里报错了, 好在我发现一个线上安装nuxt3的途径, 这就是 stackblitz.com/ ,
这里我就稍微讲讲在这里怎么装Nuxt3
进入到网站后, 如果之前没有注册过的,那么先注册一下, 最好用自己的git进行授权,这里需要注意一下, 不要直接点击上面网址的Nuxt项目进行新建, 因为那是Nuxt2的创建, 但咱们本次是要学Nuxt3, 所以需要进入Nuxt3的官网,进到里面然后点击Play on StackBlitz,就成功创建了一个简单的Nuxt项目
点击Nuxt后, 就进入了下图我截图的界面, 看看安装依赖秒级的(有可能是我之前装过这个项目), 简直是惊艳到了我, Nuxt里面的依赖是不少的, 我记得我本地安装这个依赖至少2分钟有(而且还装失败了), 这个安装速度简直是快的飞起, 运行成功后就是如下界面
现在就可以放心的Nuxt3编辑了, 但发现网页的代码字体很别扭,跟我本地开发环境配置的不一样, 怎么操作? 直接打开本地vscode的setting配置,拷贝到线上的配置里面去,线上配置入口如下, 改完之后就和本地vscode界面一模一样了, O(∩_∩)O哈哈~
遗憾
本来我想我是不是可以抛弃本地vscode,开发全部转到stackblitz, 但是我发现线上的这个vscode它不支持安装插件,我这个手比较懒的, 就希望插件代码提示更多的, 所以就这点不方便, 或许可以配,因为我还没来得及研究, 有知道的小伙伴可以留言给我, 不足之处,请多多指教!
最后
如果本文有帮助到你, 还请点个小小的赞~ 后续我还会记录更多Nuxt3学习心得
