Nuxt.jsの始め方

2021年6月22日Vue.js

Nuxt.jsの始め方について紹介します。

Nuxt.jsをインストールする


#npm install -g create-nuxt-app

と入力します。
そして


#yarn create-nuxt-app プロジェクト名
or
#npx create-nuxt-app プロジェクト名
or
#npm create-nuxt-app プロジェクト名

でNuxt.jsのアプリを作成することができます。


? Project name: first-nuxt-app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: (Use arrow keys)
❯ None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
? UI framework: None
? Nuxt.js modules: (Press  to select,  to toggle all,  to invert selection)
? Linting tools: (Press  to select,  to toggle all,  to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press  to select,  to toggle all,  to invert selection)
? What is your GitHub username? name
? Version control system: Git

このように質問を答えると、アプリが作成されます。
また、次のコマンドでもプロジェクト作成が可能です。


#yarn create nuxt-app プロジェクト名
or
#npx create-nuxt-app プロジェクト名
or
#npm init nuxt-app プロジェクト名

プロジェクトを起動する


#cd 入力したプロジェクト名

で移動して、


#npm run dev
or
#yarn dev

で起動できます。

だいたいhttp://localhost:3000/にアクセスすればOKですが、ターミナルにアクセス先が記載されるので、そのURLにアクセスします。

Vue.js

Posted by devsakaso