一 . 为什么会用到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方法内的接口」

结尾

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