使用 Nuxt.js 快速搭建服务端渲染(SSR) 应用

安装 nuxt.js

Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种是根据本身的需求自由配置
使用脚手架适合新手，对 nodejs 后台框架有所了解；按照本身需求自由配置，须要对如何配置 webpack 以及 nodejs 后台框架有所了解。
两种方式比较下就是原生和插件的区别。

使用脚手架安装

须要有 nodejs 或者 yarn 环境，推荐使用 vscode 自带的控制台输入命令行命令进行操做

在有了环境以后直接输入如下命令就能够直接建立一个项目（npx 在npm 5.2.0默认安装，使用最新稳定nodejs环境不用考虑有没有）

npx create-nuxt-app <项目名>

#或者用yarn

yarn create nuxt-app <项目名>
复制代码

以后他会提示你进行一些选择
1.项目名

在这里能够设置项目名，亦能够以后在 package.js 中设置 name 属性，通常是在输入上面命令时的项目名，不须要修改直接回车就好

2.项目描述

这里是关于项目的描述，好比是作什么的，也能够以后在 package.js 中设置 description 属性

3.选择服务器端框架

看本身习惯使用什么了，通常 Express Koa 居多

4.扩展插件 选择 axios EsLint Prettier

• axios 发送HTTP请求
• EsLint 在保存时代码规范和错误检查本身的代码。
• Prettier 在保存时格式化/美化本身的代码。

5.选择 UI 框架

UI 框架方便快速开发，提供了不少现成的样式，近几年听到最多的就是 Element UI

6.选择测试框架

测试框架是用来检测程序有没有到达预期的目的，有没有出错，这里暂时用不到，因此选择 none 就好

7.选择渲染模式

这里分单页应用（spa）以及广泛的方式（Universal），单页应用有不少路由可是页面只有一个，全部能看到的页面都是 js 即时生成的 dom，第二种是在服务器生成 html ，有多少路由就有多少页面。
使用 nuxt 就是为了解决 SEO 的问题，使其实现全部网站路径彻底被收录

8.做者

这个也能够以后在 package.js 中设置 author 属性

9.选择包管理工具

这里选择那个均可以，看本身习惯用哪一个

10.选择完成开始安装

11.安装完成

提示信息

项目目录

关于如何根据本身的需求自由配置，这里不讲，有须要自由配置的通常都不是新手了，推荐看看官方文档

添加其余经常使用功能

除了 nuxt 脚手架自带的，咱们还须要其余配置，ES6的编译 ，CSS的预处理，其余的用到了再添加

安装 babel

yarn add babel-cli babel-preset-env
复制代码

配置文件 .babelrc

{
  "presets": ["env"]
}
复制代码

安装 scss

yarn add node-sass 
yarn add sass-loader
复制代码

以后只须要在 vue 文件的 style 标签加一条属性声明下就好

<style lang="sass">

</style>

# or

<style lang="scss">

</style>
复制代码