Nuxt.js の使い方

3269 ワード
tutorial Vue.js nuxt.js Web Web テキストリンク

次のような画面を表示するまでの方法です。

インストール

sudo npm install -g vue-cli
sudo npm install -g @vue/cli-init

作成

mkdir sample04
cd sample04
mkdir sample04/pages
package.json

  "name": "sample02",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}
pages/index.vue
<template>
<blockquote>
<h1>Hello World!</h1>
<h2>こんにちは。</h2>
<blockquote>
        sample04
</blockquote>
<blockquote>
        Dec/19/2020 AM 10:00
</blockquote>
</blockquote>
</template>

nuxt のインストール

yarn add nuxt

起動

yarn dev

ブラウザーで
http://localhost:3000/
にアクセス

次のバージョンで確認しました。

$ yarn --version
1.22.17