microCMS をさわってみる その2

日本製のHeadless CMS、microCMSをさわってみる。その2

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

Nuxtのインストール

GitHubでリポジトリ作ってNuxtプロジェクトを作成

$ npx create-nuxt-app [ProjectFolderName]

今回はこんな感じに初期設定
モジュールに DotEnv 入れるとかできたんですね

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in /PATH/[ProjectFolderName]
? Project name micro-cms-demo
? Project description My cat's meow Nuxt.js project
? Author name Yuhei Jotaki
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools

🎉  Successfully created project micro-cms-demo

Nuxtの起動

$ cd [ProjectFolderName]
$ npm run dev

これで

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

となるはずなので、 http://localhost:3000/ でプレビューしながら構築する。

次回はNuxtもろもろ設定をする。