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
复制代码

5.2 安装 stylus css 预处理器

yarn add -D stylus stylus-loader
复制代码

5.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.vue
复制代码

Nuxt.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 &copy; 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 应用的便利性和高效性。

参考

• [1] zh.nuxtjs.org/guide
• [2] zh.nuxtjs.org/api

微信扫描二维码 获取最新技术原创