Nuxt.js 开发SSR(服务端渲染)Web应用

1. 初识 Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

与 vuepress 的关系：

Nuxt.js 能够胜任 VuePress 的功能，但它专为构建应用程序而设计，而 VuePress 更适合构建以内容为中心的静态站点，如技术文档，博客等。

2. 环境

笔者使用的 node 和 npm 版本如下：

• node v10.13.0
• npm v6.4.1

笔者测试 node v8.9.0 在安装依赖时会报错。在使用 nvm 切换到 node v10.13.0 后问题解决。

3. 使用脚手架 create-nuxt-app 创建应用

npx create-nuxt-app webapp

确保安装了npx（npx 在 npm v5.2.0 以后版本都默认安装了）

出现下图，说明创建和安装成功。

按照提示，进入项目目录 webapp , 启动项目开发：

cd webapp
yarn dev

浏览器打开 localhost:3000:

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

4. 目录结构

5. 模板加载和 css 预处理器

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 URL-loader 这几个 Webpack 加载器来处理文件的加载和引用。且，vue-loader 自动使用 css-loader 和 Vue 模板编译器来编译处理vue文件中的样式和模板。如要支持第三方模版编译器和CSS与处理器，只需要单独安装相应 npm 包及对应 加载器，无需其他配置，即可在项目中直接使用。

如下采用了 pug 模版和 stylus css 预处理器：

5.1 安装 pug 模版加载器

yarn add -D pug pug-plain-loader