• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Nuxt3入门教程:尝鲜体验非常惊艳

开发工具 佰阅 10个月前 (02-13) 1949次浏览

Nuxt3经过重新设计,内核更小,并针对更快的性能和更好的开发者体验进行了优化。2021年前端领域由于vue3和vite的广泛使用,其后续的生态链现已逐步成熟,Nuxt3现已进入beta阶段,尝鲜的第一感觉就是很“vite”,路由、布局、甚至组件全自动引入,package里就跟vite一样简洁。

0. 效果截图

1. 为什么我们非常重视Nuxt3?

前端框架Vue是典型的SPA单页应用,非常适合没有SEO的管理系统。搜索引擎只能识别普通的HTML文本,传统的解决方式都是后台程序内嵌前端,比如php里的wordpress程序,完全依赖后端程序动态生成页面给用户。类似的还有python里的flask或go语言里的web框架,都支持内嵌动态前端模板。

传统方式不利于前后端独立开发,Nuxt3刚好解决了这一难题。我们可以继续使用VUE开发前端页面,同时可以在服务器上调用后端api里的数据,并把渲染好的普通html文本发给用户。虽然消耗了一部分服务器资源,但是搭配NGINX的缓存和CDN后,实际上响应更快,用户体验甚至更好,同时也解决了SEO的问题。

当今时代,面对海量新旧数据,流量入口就是生死线,所以我们特别重视Nuxt3。

2. 初始化

项目文档:https://v3.nuxtjs.org

npx nuxi init nuxt3-app #初始化一个nuxt3项目
cd nuxt3-app    # 进入目录
# 安装依赖
yarn install
# 启动项目
yarn dev

至此一个nuxt环境已搭建好,package.json和vite一样简洁。

在线体验:
stackblitz
CodeSandBox

3. 其他

nuxt3的文档已经非常完善了,其设计逻辑在后续使用过程中就能感受到,非常惊艳。

nuxt3内置一些设计,当相关目录存在时自动引入,比如组件、视图等等,还有路由页面等。删除根目录下的app.vue,然后pages目录下新建index.vue文件,就会自动关联vue-router,支持动态路由。

在多个组件里,你以为你的UI组件库会被重复产生,实际上只会产生一个共有资源。前端输出体积极小,可以说没有冗余。

4. 支持Nuxt3的UI组件库

5. 展望

可以预见,借助Nuxt3工具,后续会出现一大批新型独立网站,他们全都采用前后端分离开发,SEO也非常友好,甚至可能会真正撼动wordpress这样的程序,因为一个百花齐放的入口已经敞开,未来拼的只能是创意和执行力。


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Nuxt3入门教程:尝鲜体验非常惊艳
喜欢 (1)