nuxt 开发中遇到的坑一之nuxt初印象

一 . 为什么会用到nuxt框架技术

对于nuxt技术,我一直是有所耳闻的,直到最近,因为公司的项目需要,才真正的去使用它。 契机是公司新规划一个项目, 需要做 SEO, 在技术选型的时候,综合下当下公司的技术栈体系以及开发模式,最终决定使用 nuxt技术。

在需要进行 SEO 的前提下, 笔者想到几个技术方案,权当参考把

第一种是 使用后端模板引擎技术,在后端就做好了 数据和html的组装,直接返回个前端浏览器渲染就好了。 这种模式下, 前端项目是嵌入在后端项目中的, 与后端耦合高, 是属于传统的开发模式。 技术栈基本就是 jquery + bootstrap 这种模式 。最后为啥没选,一方面是为了开发效率,考虑使用前后端分离模式 并行开发,另一方面是公司同伴居然还有不熟悉jquery的,好吧,也有这原因

第二种方案 算是第一种的进化版吧。 准备利用node技术,作为前端和后端数据传送的中转 ,在node服务端做模板渲染,再返回给浏览器。对比第一种,基本实现前后端分离开发 。 缺点是,仍然需要 jquery + bootstrap 去码代码。

第三种算是第二种的进化版把,直接使用nuxt技术栈搭建项目好了 , 开箱操作,省力气,vue技术栈,不用再去普及基础了(vue 再不会,可以开除了)

二 项目的搭建

直接使用脚手架工具就好啦

a 直接执行

npx create-nuxt-app 项目名

nuxt 开发中遇到的坑一之nuxt初印象

剩下的直接一路确定就行了。

nuxt 开发中遇到的坑一之nuxt初印象

安装好长这样

nuxt 开发中遇到的坑一之nuxt初印象

b. 开发模式

直接启动 npm run dev

nuxt 开发中遇到的坑一之nuxt初印象

启动好长这样

nuxt 开发中遇到的坑一之nuxt初印象

c. 部署生产的话

直接执行 npm run build

nuxt 开发中遇到的坑一之nuxt初印象

然后部署的时候 启用 npm run start

nuxt 开发中遇到的坑一之nuxt初印象

这里和单页应用有差异了, 单页应用打完包想要访问的话, 要塞到web服务器中才能看到页面。 nuxt是自带web服务,可以启动直接查看。

当然,实际上生产环境要正常访问的话, 还是要配置nginx的「主要是在非asyncData方法内的接口」

结尾

这一篇就讲到这吧,下篇文章正式分享,实际开发中遇到的问题和解决方案

上一篇:nuxt.js相关随笔


下一篇:javascript – 预加载iframe