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

微信掃描二維碼 獲取最新技術原創