服务端渲染——初识基于Express+Nuxt.js的开发模式

最新推荐文章于 2025-05-15 17:45:50 发布

fewuliu

最新推荐文章于 2025-05-15 17:45:50 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web前端全栈 # Nuxt.js

本文链接：https://blog.csdn.net/qq_42049445/article/details/100669517

web前端全栈同时被 2 个专栏收录

38 篇文章

订阅专栏

Nuxt.js

1 篇文章

订阅专栏

前言
在看完 Nuxt.js 官方文档后，在 GitHub 上找了几个项目，但是在解读项目目录结构的时候，我陷入了沉思…几乎 GitHub 上的几个比较火的 Nuxt.js 的项目都会有一个 server 或 api 的文件目录，里面的代码还是用 Express 的后端接口…那么 Nuxt.js 到底为什么会和 Express 一起结合使用？

一、 Express

Express官网最精简的介绍即基于 Node.js 平台，快速、开放、极简的 Web 开发框架。简而言之，Express 就是一个基于 Node.js 的框架，并且是最受欢迎的 Node.js 框架。

二、 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的用于实现服务端渲染的框架，Nuxt.js 不仅仅只是集成了 Vue.js ，还相应的集成了 Vuex、Vue-Router、Vue-Meta 以及 Vue 服务端渲染。并且 Nuxt.js 还提供了多种创建项目的模板，例如：starter-template、express-template、typescript-template、adonuxt-template 等等（想了解更多模板可以去Nuxt.js社区查看，本次只解读express-template的方式创建Nuxt.js应用）

三、express-template

初始化模板：

	vue init nuxt-community/express-template nuxt-express
	npm install

项目目录结构：

	|—— api					         Node.js代码存放目录
	    |—— routes                   api接口代码文件目录
	  	    |—— users.js             api接口代码文件
		|—— index.js                 核心文件
	|—— assets                       用于放置未编译的静态资源如 LESS、SASS
		|—— css                        
	    |—— img
	|—— components                   普通组件目录
	    |—— Footer.vue
	|—— layouts                      布局文件目录
		|—— default.vue              默认布局（必须）
	    |—— error.vue               
	|—— pages                        路由组件目录
		|—— _id.vue                  路由组件文件（编译后会自动生成路由/:id）
	    |—— index.vue                路由组件文件（对应路由/）
	|—— plugins                      公共函数目录
	    |—— axios.js
	|—— static                       静态文件目录，该目录不会被webpack编译
	|—— .eslintrc.js       
	|—— .gitignore
	|—— nuxt.config.js               用于自定义配置，可以覆盖默认配置
	|—— package.json
	|—— README.md

需要注意的是，初始化的模板中没有store目录，需要自行创建，直接引入Vuex就行，因为NUXTJS已经集成了Vuex，不需要额外安装依赖。

运行项目：

	npm run dev

在这里插入图片描述
访问页面：

	http://localhost:3000/

访问接口：

	http://localhost:3000/api/users/0

通过上面的流程，可以很容易的看出，使用express-template的方式创建的SPA，可以实现把后端需要做的事放到前端来做，缩短了ajax请求和响应的时间。看上去很像传统的后端框架的MVC的模式，但是换个角度，传统的MVC的V可以仅仅是把网页当作模板输出，而express-template开发的是应用（请注意应用和网页的区别！）

服务端渲染（总结）

优点：