Vueで静的ブログを作りたい!

A6e201e1ce07729fb7ec953c1019331b?s=47 Naruto
January 21, 2020

 Vueで静的ブログを作りたい!

A6e201e1ce07729fb7ec953c1019331b?s=128

Naruto

January 21, 2020
Tweet

Transcript

  1. 18.
  2. 20.

    PLAN B PLAN B Nuxt.js設定ファイル (nuxt.config.js) 記事 コンテンツサーバー ページコンポーネント 記事一覧

    記事本文 日付...etc ルート生成 nuxt generate (静的サイト生成) nuxt (開発時) HTML
  3. 23.
  4. 25.

    Vue Server Renderer Vue.jsでのサーバーサイドレンダリングを提供 import Vue from 'vue' import {

    readFileSync } from 'fs' import { createRenderer } from 'vue-server-renderer' const renderer = createRenderer({ template: readFileSync('/path/to/template').toString() }) const vm = new Vue({ render: h => h('div', 'hello') }) renderer.renderToString(vm, {}).then(html => { console.log(html) // => hello }) https://ssr.vuejs.org/
  5. 26.

    Webpackプラグイン import { Compiler } from 'webpack' export default class

    { apply(compiler: Compiler) { compiler.hooks.run.tap('MyPlugin', compilation => { console.log('Build process is starting!!!'); }); } } https://webpack.js.org/concepts/plugins/