详细解释如何使用Nuxt.js快速构建服务器端渲染(SSR)应用程序

安装nuxt.js

Nuxt.js正式推广了两种方法来初始化项目。一是使用Nuxt.js团队的脚手架工具create-nuxt-app，二是根据自己的需求自由配置

脚手架适合初学者，对nodejs后台框架有一定了解；根据自己的需求，需要知道如何配置webpack和nodejs后台框架。

比较这两种方法是本机和插件的区别。

使用脚手架进行安装

需要节点或纱线环境。建议使用vscode的控制台输入命令行命令进行操作

环境可用后，可以直接输入以下命令直接创建项目(npx默认安装在npm 5.2.0中，不需要使用最新的稳定nodejs环境)

npx create-nuxt-app项目名#或使用yarnyarn create nuxt-app项目名后，他会提示你做一些选择

1.项目名

您可以在这里设置项目名称，也可以稍后在package.js中设置name属性。一般输入上述命令时就是项目名称，不需要修改直接输入。

2.项目描述

下面是项目的描述，比如做什么，或者您可以稍后在package.js中设置description属性。

3.选择服务器端框架

看看你习惯了什么，快递Koa用的最多。

4.扩展插件

选择axios EsLint更漂亮

Axios在保存时发送HTTP请求EsLint检查自己的代码是否有代码规范和错误。保存时更美观地格式化/美化自己的代码。

5.选择用户界面框架

UI框架方便快速开发，提供了很多现成的样式。近几年听得最多的是元素UI

6.选择测试框架

测试框架用于检测程序是否达到了预期的目的，是否有错误。这里暂时不需要，所以选择无

7.选择渲染模式

有两种应用：spa和Universal。SPA中有很多路线，但只有一页。所有可见的页面都是由js即时生成的dom。第二个是服务器上生成的html，页面和路由一样多。

Nuxt用来解决SEO的问题，让所有的网站路径都可以完全包含进去

8.作者

您也可以稍后在package.js中设置作者属性

9.选择包管理工具

你可以在这里选择哪个，看看你习惯哪个

10.选择“完成”开始安装

11.安装完成

提示信息

项目目录

关于如何根据自己的需求自由配置，这里就不多说了。需要自由配置的一般不是新手。建议看看官方文件

添加其他常用功能

除了nuxt支架，我们还需要其他配置，例如编译ES6、预处理CSS和添加其他配置

安装巴别塔

纱线添加巴别塔-命令行界面巴别塔-预设-环境配置文件。babelrc

{“预设”:[“env”]}安装SCS

纱线添加节点-sass纱线添加sass加载器后，只需要在vue文件的样式标签中添加一个属性声明

Stylelang=' sass'/style #或style lang=' SCS '/style以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。