一篇文章搞懂服务器端渲染与客户端渲染以及利用脚手架工具 create-nuxt-app搭建Nuxt.js项目

服务器端渲染与客户端渲染

服务器端渲染：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。例如：https://www.cnblogs.com/cate/design/

客户端渲染：数据由浏览器通过ajax动态取得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫客户端渲染。例如：https://h5.ele.me/msite/

服务器端渲染与客户端渲染哪个更好？

哪个更好没有标准的答案，看使用场景。

1. 服务器端渲染需要消耗更多的服务器资源(CPU,内存)。
2. 客户端渲染可以将静态资源部署到cdn上，实现高并发。
3. 服务端渲染对SEO更友好。

用脚手架工具 create-nuxt-app搭建Nuxt项目

vue官方提供的学习服务器端渲染Nuxt.js的网址是：https://ssr.vuejs.org/zh/
我们知道Nuxt.js是一个基于Vue.js的通用应用框架，Nuxt.js官网是https://zh.nuxtjs.org/，Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。确保安装了npx（npx在NPM版本5.2.0默认安装了，所以我们在搭建nuxt项目之前可以用命令npm -v检测一下npm版本是不是在5.2.0及以上版本），如下例，可以看到我的npm版本符合要求：

然后输入如下命令开始安装脚手架：

npx create-nuxt-app <项目名>

比如我这里就给项目取名为hello-nuxt,回车安装之后就会问我们一系列的问题，如下图：

会依次问我们的项目名称，描述，作者都是谁，我们可以直接一路回车，然后让我们先编程语言，我们可以选ts，也可以选js.键盘上下键切换选择，空格键切换是否选中，都是这样的。我们就选我们熟悉的js,然后选择包管理器，我们选择熟悉的npm,如下图:

然后选择UI框架，你可以选择你熟悉的比如Element，这里我暂时先不选UI框架，即选中None

回车后问我们选择服务端框架，我选的None(Nuxt默认服务器)，这样不会生成server文件夹，所有的服务端渲染操作都是Nuxt帮你完成，无需关心服务端细节，开发体验更接近Vue项目，缺点是无法做一些服务端定制化的操作。当然你也可以根据业务情况选择常见的服务端框架，如Express、Koa.这样就会生成server文件夹，帮你搭建一个基于Node服务端环境，可以做一些node端的操作。

回车后问我们选择Nuxt.js的模块，我选择Axios这个，它会帮我在nuxt实例下注册$ axios,让你可以在.vue文件直接this.$axios发起请求。

回车问我们是否选择eslint，使用的话就会对语法和格式要求很严格，真心不建议用，我就觉得它太坑了，这个prettier是帮我们格式化代码的，暂时也不用.

回车后问我们选择哪种测试框架，这里我选择None(随意添加一个)

回车后问我们选择哪种Nuxt模式，由于我们要构建单页面应用，所以这里我们选Single Page App

回车后问我们选择哪种开发工具，我们就选熟悉的VScode,如下图，空格选中：

下载好了之后我们就是命令cd <项目名>

cd <项目名>

然后命令< npm run dev>启动项目。

npm run dev

注意：在vue项目中是有入口文件main.js的，而在nuxt里没有main.js而且项目初始化的操作都是在文件nuxt.config.js进行配置指定的。nuxt.js中引入了node,同时nuxt.config.js替代了main.js的一些作用，目录结构和vue项目稍有不同，增加了很多约定。

关注我的微信公众号学习更多前端知识：