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

本文主要是介绍nuxt 开发中遇到的坑一之nuxt初印象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

结尾

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

这篇关于nuxt 开发中遇到的坑一之nuxt初印象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！