Nuxt.js實戰

JinB 發布于2019-08-22 13:45 / 1086人閱讀

摘要：文件配置默認共用中創建標簽不對標簽中內容做轉義處理拓展配置添加配置頭部標簽管理通過實現頭部標簽管理，在中的配置。

一、為什么選擇Nuxt.js

多數是基于webpack構建的項目，編譯出來的html文件，資源文件都被打包到js中，以下圖404頁面代碼為例。從代碼中可以看出，這樣的頁面是不利于 搜索引擎優化(SEO, Search Engine Optimization) ，并且 內容到達時間(time-to-content) （或稱之為首屏渲染時長）也有很大的優化空間。為了解決以上問題，引入了 Nuxt.js 框架。

vue官網對于Nuxt.js也是很推薦的，除此之外，Nuxt.js的開發者積極活躍，版本迭代迅速。經過一系列rc版本后，終于在1月9日發布了 v1.0.0 正式版本！

圖1. 使用webpack構建的HTML（代碼已格式化）

圖2. 使用 Nuxt.js 構建的HTML（代碼已格式化）

二、Nuxt.js 簡介

Nuxt.js 是一個基于 Vue.js 的通用應用框架，它預設了利用 Vue.js 開發 服務端渲染（SSR, Server Side Render） 的應用所需要的各種配置，同時也可以一鍵生成靜態站點。

作為框架，Nuxt.js 為客戶端/服務端這種典型的應用架構模式提供了許多有用的特性，例如異步數據加載、中間件支持、布局支持等。區別于其他 vue SSR 框架，Nuxt.js 有以下比較明顯的特性。

自動代碼分層

強大的路由功能，支持異步數據（路由無需額外配置）

HTML頭部標簽管理（依賴 vue-meta 實現）

內置 webpack 配置，無需額外配置

三、項目實戰 1、項目創建

官方提供了基于 vue-cli 腳手架工具，常用的有如下三個，更多腳手架工具可以查看 nuxt-community 。本項目使用的是 express-template。

vue init nuxt-community/starter-template 

vue init nuxt-community/koa-template 
 
vue init nuxt-community/express-template

2、開發 1）目錄結構

├─assets                 資源目錄，未編譯的靜態資源如less、js
├─components             組件目錄
├─layouts                布局目錄
├─mock                   mock數據
├─node_modules           
├─pages                  頁面目錄
  ├─index.vue
  ├─....                 
├─plugins                插件
├─server                 express服務
├─static                 靜態文件目錄
├─store                  vuex store
├─utils                  工具方法

2）配置

Nuxt.js 默認的配置涵蓋了大部分使用情形，也可通過修改 nuxt.config.js 來覆蓋默認配置。

// nuxt.config.js 文件配置
const path = require("path")

module.exports = {
  // Headers of the page
  head: {
    title: "默認共用title",
    meta: [
      { charset: "utf-8" },
      { "http-equiv": "pragma", content: "no-cache" },
      { "http-equiv": "cache-control", content: "no-cache" },
      { "http-equiv": "expires", content: "0" },
      { content: "telephone=no", name: "format-detection" }
    ],
    // html head 中創建 script 標簽
    script: [
      { innerHTML: require("./assets/js/flexible_nuxt"), type: "text/javascript", charset: "utf-8"}
    ],
    // 不對
在config header配置中， __dangerouslyDisableSanitizers: ["script"] 主要是為了不對

我們發現 vue-meta 把引號做了轉義處理，加入 __dangerouslyDisableSanitizers: ["script"] 后，就不會再對這些字符做轉義了，該字段使用需慎重！

3）路由

Nuxt.js 依據 pages 目錄結構，自動生成 vue-router 模塊的路由配置。

假設 pages 的目錄結構如下：

那么，Nuxt.js 自動生成的路由配置如下：

嵌套路由：

創建內嵌子路由，需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。在父級 Vue 文件內增加用于顯示子視圖內容。

4）布局

Nuxt.js布局方式如下圖所示：

layouts對應目錄中的layouts文件夾，默認pages下的頁面走的都是 layouts/default.vue 布局方式，如下圖。其中可以類似vue中slot插槽的概念，pages/**.vue中的內容會插在內。

此外，如果想要某一頁面，不走默認布局方式，可以在vue文件中配置layouts，如下。

5）vuex

在根目錄創建 store 目錄，就會默認引用 vuex 模塊，除此之外，還進行了以下的操作：1）將 vuex 模塊加到 vendors 構建配置中去；2）設置 Vue 根實例的 store 配置項。

Nuxt.js 支持兩種使用 store 的方式：

普通方式：store/index.js 返回一個 Vuex.Store 實例

模塊方式：store 目錄下的每個 .js 文件會被轉換成為狀態樹指定命名的子模塊（當然，index 是根模塊，相當于設置了namespaced: true)

Nuxt.js提供了模塊方式的簡單寫法：使用狀態樹模塊化的方式，store/index.js 不需要返回 Vuex.Store 實例，直接將 state、mutations 和 actions 暴露出來即可。示例如下：

export const state = () => ({
  accesstoken: ""
})

export const mutations = {
  setAccesstoken (state, accesstoken) {
    state.accesstoken = accesstoken
  }
}

6）異步數據 asyncData

Nuxt.js 增加了一個 asyncData 方法，用于在設置組件數據之前能夠異步獲取或處理數據。
由于 asyncData 是在組件初始化之前被調用的，所以不能通過 this 引用組件的實例對象，可以使用上下文對象來實現某些功能，可參考 context api
示例?：

asyncData (params) {
  let accesstoken = params.route.query.accesstoken
  // request 基于 axios 封裝的函數
  return request({
    url: "/drivers/banks",
    method: "get",
    headers: {
      accesstoken
    }
  })
    .then(res => {
      let {
        bankInfo
      } = res.data
      return {
        banksData: bankInfo,
        accesstoken
      }
    })
    .catch(err => {
      return error({ message: "accesstoken not found", statusCode: 404 })
    })
}

上述代碼，會在組件初始化之前，請求"/drivers/banks"接口，接口返回的數據會 融合在 data 中，一并返回模版顯示。在瀏覽器中，使用Vue DevTools可以清晰的查看到 banksData, accesstoken 都在data中。
在調試中發現，刷新頁面時，該請求是在服務端發送的，由其他頁面回退到該頁面時，請求是在客戶端發送的。

7）fecth方法

與 asyncData 方法類似，不同的是它不會設置組件的數據，作用是設置 store 數據。

五、總結

本項目在開發中，使用的是 1.0.0-rc9 版本，我們正在積極嘗試遷移到 1.0.0 正式版本。但是，1.0.0-rc9 版本，未見明顯問題，比較穩定，足以投入到生產中。
本文主要介紹 Nuxt.js 的特性，后面還會和大家分享踩的坑。文中有任何表述不清或不當的地方，歡迎大家批評指正。
此外，推薦我們的公眾號 前端新視野 ，一個很認真的日刊公眾號，歡迎掃描下方二維碼關注！

GPU云服務器云服務器 nuxt.js 實戰開發項目實戰實戰篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92412.html

Docker部署基于Nodejs的Web應用-實戰篇

摘要：采用虛擬化的技術來虛擬化出應用程序的運行環境。安裝成功后，可以通過查看版本號盡量使用最新的穩定版本。是鏡像名，是鏡像的版本號，到此你已經成功構建了一個新的鏡像，你可以通過，查看你的鏡像。部署時將此文件到生產環境服務器上。 Docker docker是一個開源的應用容器引擎，可以為我們提供安全、可移植、可重復的自動化部署的方式。docker采用虛擬化的技術來虛擬化出應用程序的運行環境。此...

marek 2019-08-20 18:35 評論0 收藏0
Docker部署基于Nodejs的Web應用-實戰篇

摘要：采用虛擬化的技術來虛擬化出應用程序的運行環境。安裝成功后，可以通過查看版本號盡量使用最新的穩定版本。是鏡像名，是鏡像的版本號，到此你已經成功構建了一個新的鏡像，你可以通過，查看你的鏡像。部署時將此文件到生產環境服務器上。 Docker docker是一個開源的應用容器引擎，可以為我們提供安全、可移植、可重復的自動化部署的方式。docker采用虛擬化的技術來虛擬化出應用程序的運行環境。此...

mikasa 2019-06-28 15:56 評論0 收藏0
vue-meta讓你更優雅的管理頭部標簽

摘要：在應用中，如果想要修改的頭部標簽，或許，你會在代碼里，直接這么做改下引入一段修改信息，或者給標簽添加屬性此處省略一大坨代碼今天給大家介紹一種更優雅的方式，去管理頭部標簽介紹借用上的介紹，基于的插件，主要用于管理頭部標簽，同時也支持。在 Vue SPA 應用中，如果想要修改HTML的頭部標簽，或許，你會在代碼里，直接這么做: // 改下title document.title = wh...

leone 2019-08-22 13:51 評論0 收藏0
推送近期三波關于Vue.js的資訊

摘要：原文來自集前端最近很火的框架資源定時更新，歡迎一下。推送自己整理近期三波關于的資訊這里就拋磚引玉了，望有更屌的資源送助攻。原文來自：集web前端最近很火的vue2框架資源；定時更新，歡迎Star一下。推送自己整理近期三波關于Vue.js的資訊；這里就拋磚引玉了，望有更屌的資源送助攻。 showImg(https://segmentfault.com/img/bVVeiZ); 第...

Anonymous1 2019-08-22 11:10 評論0 收藏0
深入NUXT，看看一條命令行的背后到底發生了什么

摘要：一介紹隨著社區的框架的發布，社區也終于誕生了屬于自己的前后端同構框架。本文主要研究的運行原理，分析它從接收一條指令，到完成指令背后所發生的一系列事情。最后，通過來檢查輸出的是否存在問題，然后發出通知，表明可用。 showImg(https://segmentfault.com/img/bVIc9l?w=536&h=136); 一、介紹 Nuxt.js - Universal Vue.j...

opengps 2019-08-20 13:45 評論0 收藏0