一 . 为什么会用到nuxt框架技术
对于nuxt技术,我一直是有所耳闻的,直到最近,因为公司的项目需要,才真正的去使用它。 契机是公司新规划一个项目, 需要做 SEO, 在技术选型的时候,综合下当下公司的技术栈体系以及开发模式,最终决定使用 nuxt技术。
在需要进行 SEO 的前提下, 笔者想到几个技术方案,权当参考把
第一种是 使用后端模板引擎技术,在后端就做好了 数据和html的组装,直接返回个前端浏览器渲染就好了。 这种模式下, 前端项目是嵌入在后端项目中的, 与后端耦合高, 是属于传统的开发模式。 技术栈基本就是 jquery + bootstrap 这种模式 。最后为啥没选,一方面是为了开发效率,考虑使用前后端分离模式 并行开发,另一方面是公司同伴居然还有不熟悉jquery的,好吧,也有这原因
第二种方案 算是第一种的进化版吧。 准备利用node技术,作为前端和后端数据传送的中转 ,在node服务端做模板渲染,再返回给浏览器。对比第一种,基本实现前后端分离开发 。 缺点是,仍然需要 jquery + bootstrap 去码代码。
第三种算是第二种的进化版把,直接使用nuxt技术栈搭建项目好了 , 开箱操作,省力气,vue技术栈,不用再去普及基础了(vue 再不会,可以开除了)
二 项目的搭建
直接使用脚手架工具就好啦
a 直接执行
npx create-nuxt-app 项目名
剩下的直接一路确定就行了。
安装好长这样
b. 开发模式
直接启动 npm run dev
启动好长这样
c. 部署生产的话
直接执行 npm run build
然后部署的时候 启用 npm run start
这里和单页应用有差异了, 单页应用打完包想要访问的话, 要塞到web服务器中才能看到页面。 nuxt是自带web服务,可以启动直接查看。
当然,实际上生产环境要正常访问的话, 还是要配置nginx的「主要是在非asyncData方法内的接口」
结尾
这一篇就讲到这吧,下篇文章正式分享,实际开发中遇到的问题和解决方案