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-loader5.2 安装 stylus css 预处理器
yarn add -D stylus stylus-loader5.3 在 .vue 文件中使用 pug 和 stylus
<template lang="pug">
.container hello world !
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus">
.container
margin 0 auto
min-height 100vh
display flex
justify-content center
align-items center
text-align center
</style>
6. 页面路由
nuxt 使用 vue-router 进行页面路由管理。但是，并不需要像直接使用 vue-cli 创建项目那样手动配置路由文件。nuxt 巧妙地根据页面 pages 目录页面组件文件的路径，自动生成对应的路由配置。并且通过在页面子目录或 .vue 文件名前加下划线 _ 来实现动态路由。
例如，以下目录结构：
pages/
--| list/
-----| index.vue
--| detail/
-----| _id.vue
-----| index.vue
--| user/
-----| _id.vue
--| index.vueNuxt.js 生成对应的路由配置表为：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user-id',
path: '/user/:id?',
component: 'pages/user/_id.vue'
},
{
name: 'list',
path: '/list',
component: 'pages/list/index.vue'
},
{
name: 'detail-id',
path: '/detail/:id',
component: 'pages/detail/_id.vue'
}
]
}7. 添加全局样式
在 assets 目录下添加样式文件 main.styl:
.container
margin 0 auto
min-height 100vh
display flex
justify-content center
align-items center
text-align center在配置文件 nuxt.config.js 中 css 属性中添加样式文件，以使新添加的样式文件全局生效:
css: [
'assets/main.styl'
]到这一步，可以将 5.3 小节中
<style lang="stylus"><style>中的.container样式删除。
8. 布局组件
布局组件是存放在 layouts 目录下具有特殊用途的 vue 组件，主要用于给 web 应用的所有页面或相同类型的页面提供一致的布局。框架提供一个默认布局组件 laouts/default.vue。
修改这个文件如下：
<template lang="pug">
page
xheader
xmain
nuxt
xfooter
</template>
<script>
import page from '~/components/page'
import xheader from '~/components/header'
import xmain from '~/components/main'
import xfooter from '~/components/footer'
export default {
components: {
page,
xheader,
xmain,
xfooter
}
}
</script>如你所见，页面出现 4 个报错，接下来我们即将解决这个问题。
9. 普通组件
上文在布局组件 layouts/default.vue 中引用了 4 个还未创建的组件。我们分别创建如下：
9.1 componets/page.vue
<template lang="pug">
.page
slot
</template>
<style lang="stylus">
.page
background #F4F7F9
display flex
min-height 100vh
flex-direction column
</style>9.2 componets/header.vue
<template lang="pug">
.header header
</template>
<style lang="stylus">
.header
width 100%
height 50px
line-height 50px
background: #fff
</style>9.3 componets/main.vue
<template lang="pug">
.main
slot
</template>
<style lang="stylus">
.main
width 980px
margin 0 auto
flex 1
</style>9.4 componets/footer.vue
<template lang="pug">
.footer
p.copy 2019 © ken
</template>
<style lang="stylus">
.footer
height 100px
margin 15px auto
</style>10. 设计实现业务页面
第6小节中，我们已经创建了一些页面，但还未实现任何界面和业务逻辑。目前，我们已经有了统一的布局，接下来，就是专注特定页面的设计实现了。
10.1 首页 pages/index.vue
URL: localhost:3000/
<template lang="pug">
.container home
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>10.2 用户中心 pages/user/_id.vue
URL: localhost:3000/user/1
<template lang="pug">
.container user-id
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>10.3 列表页 pages/list/index.vue
URL: localhost:3000/list
<template lang="pug">
.container list
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>10.4 详情页 pages/detail/_id.vue
URL: localhost:3000/detail/1
<template lang="pug">
.container detail-id
</template>
<script>
export default {
components: {}
}
</script>
<style lang="stylus"></style>End
到此，已经完成一个使用 Nuxt.js 搭建的通用 web 应用的基本界面框架，如果，一步步跟着完成，基本可以算作入门了。更深入的了解，需要在业务开发中，深入挖掘。相信，和我一样，你也会喜欢上 Nuxt.js 构建现代化的 web 应用的便利性和高效性。