VUE 服務器端渲染-NUXT

筆記參考
https://zh.nuxtjs.org/

1. 服務器端渲染 利於 SEO
2. 客戶端渲染

vue-server-renderer

https://ssr.vuejs.org/zh/guide/

安裝環境

npm install vue vue-server-renderer --save

1、渲染示例

const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");

// 第 1 步：創建一個 Vue 實例
const app = new Vue({
  template: `<div>Hello {{name}}</div>`,
  data() {
    return {
      name: "Tom",
    };
  },
});

// 第 2 步：創建一個 renderer
const renderer = VueServerRenderer.createRenderer();

// 第 3 步：將 Vue 實例渲染爲 HTML
renderer.renderToString(app).then((html) => {
  console.log(html);
});
// <div data-server-rendered="true">Hello Tom</div>

2、與服務端結合

npm install express --save

const Vue = require("vue");
const VueServerRenderer = require("vue-server-renderer");
const express = require("express");

// vue實例
const app = new Vue({
  template: `<div>Hello {{name}}</div>`,
  data() {
    return {
      name: "Tom",
    };
  },
});

// 渲染器
const renderer = VueServerRenderer.createRenderer();

// 服務
const server = express();

server.get("*", async (request, response) => {
  const html = await renderer.renderToString(app);
  response.end(html);
});

server.listen(8080);

官方 Demo
https://github.com/vuejs/vue-hackernews-2.0/

Nuxt

1、使用 npx 創建項目

npx create-nuxt-app my-app

# 等價於
npm install -g create-nuxt-app
create-nuxt-app my-app

如果速度慢，可以配置國內源

vim ~/.bash_profile

alias cnpx='NPM_CONFIG_REGISTRY=https://registry.npm.taobao.org/ npx'

2、目錄結構

靜態資源          assets 會被編譯 scss等
組件             components
佈局組件          layouts
中間件            middleware
頁面路由          pages
插件目錄          plugins 根vue.js應用 實例化之前運行
靜態文件          static 不會被編譯處理
應用的Vuex 狀態樹  store
個性化配置         nuxt.config.js
腳本接口           package.json

別名

~ 或 @ srcDir
~~ 或 @@ rootDir

assets 或者 static 使用~

3、配置

css

npm install node-sass sass-loader --save-dev

4、路由

<nuxt-link to="/"></nuxt-link>

pages 目錄下會自動生成

(1)基礎路由

pages/detail
=>
/detail

(2)動態路由

pages/detail/_id.vue

=>

/detail/007

$route.params.id == 007

(3)嵌套路由

pages/users.vue

pages/users/index.vue

(4)過渡動效

assets/css/main.scss

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

nuxt.config.js：

module.exports = {
  css: ["assets/css/main.scss"],
};

5、中間件 middleware

6、模板

app.html 不建議直接修改

佈局 layouts

7、異步數據

asyncData 頁面加載之前

static/data/user.json

{
  "name": "Tom",
  "age": 23
}

pages/index.vue

<template>
  <div class="container">
    {{ initData.name }}
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    async asyncData(context) {
      const res = await axios.get("http://localhost:3000/data/user.json");
      console.log(res);

      return {
        initData: res.data,
      };
    },
  };
</script>

8、資源文件

assets 會被打包

static 不會被打包

<!-- 引用 static 目錄下的圖片 -->
<img src="/my-image.png" />

<!-- 引用 assets 目錄下經過 webpack 構建處理後的圖片 -->
<img src="~/assets/my-image-2.png" />

9、插件

plugins/vue-notifications.js：

import Vue from "vue";
import VueNotifications from "vue-notifications";

Vue.use(VueNotifications);

配置 plugins 如下：

module.exports = {
  plugins: ["@/plugins/vue-notifications"],
};

10、注入

(1)注入 Vue 實例

plugins/vue-inject.js:

import Vue from "vue";

Vue.prototype.$debug = (msg) => console.log(msg);

nuxt.config.js:

export default {
  plugins: ["~/plugins/vue-inject.js"],
};

(2)注入 context

plugins/ctx-inject.js:

export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.debug = (msg) => console.log(msg);
};

nuxt.config.js:

export default {
  plugins: ["~/plugins/ctx-inject.js"],
};

(3)同時注入

會自動添加前綴$

export default ({ app }, inject) => {
  inject("debug", (msg) => console.log(msg));
  );
};

nuxt.config.js:

export default {
  plugins: ["~/plugins/combined-inject.js"],
};

11、狀態樹

fetch 方法會在渲染頁面前被調用，作用是填充狀態樹 (store) 數據

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

nuxtServerInit：服務端數據傳給客戶端的狀態樹

store/index.js

export const state = () => ({
  counter: 0,
});

export const mutations = {
  increment(state) {
    state.counter++;
  },
};

pages/index.vue

<p>{{$store.state.counter}}</p>

<button @click="$store.commit('increment')">點擊</button>

12、部署

開發 npm dev
上線 npm start

學習視頻:
VUE 服務器端渲染-NUXT 實戰視頻