facebook twitter hatena line email

「Javascript/nuxtjs/インストール」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(nuxt-appを使ってプロジェクト生成)
(手動でプロジェクト作成)
 
(同じ利用者による、間の1版が非表示)
行2: 行2:
 
  yarn create nuxt-app project1
 
  yarn create nuxt-app project1
  
==動作==
+
===動作===
  cd project1
+
  $ cd project1
  yarn dev
+
  $ yarn dev
  
 
以下ブラウザで確認
 
以下ブラウザで確認
 
  ttp://localhost:3000
 
  ttp://localhost:3000
 +
 +
==手動でプロジェクト作成==
 +
$ mkdir test1
 +
$ cd test1
 +
 +
package.json
 +
<pre>
 +
{
 +
  "name": "my-app",
 +
  "scripts": {
 +
    "dev": "nuxt",
 +
    "build": "nuxt build",
 +
    "generate": "nuxt generate",
 +
    "start": "nuxt start"
 +
  }
 +
}
 +
</pre>
 +
$ yarn add nuxt
 +
===ページ作成===
 +
$ mkdir pages
 +
 +
pages/index.vue
 +
<pre>
 +
<template>
 +
  <h1>Hello world!</h1>
 +
</template>
 +
</pre>
 +
 +
===動作===
 +
$ yarn dev
 +
 +
以下ブラウザで確認
 +
ttp://localhost:3000
 +
 +
==参考==
 +
nuxt公式:https://ja.nuxtjs.org/docs/2.x/get-started/installation

2021年6月4日 (金) 18:45時点における最新版

nuxt-appを使ってプロジェクト生成

yarn create nuxt-app project1

動作

$ cd project1
$ yarn dev

以下ブラウザで確認

ttp://localhost:3000

手動でプロジェクト作成

$ mkdir test1
$ cd test1

package.json

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}
$ yarn add nuxt

ページ作成

$ mkdir pages

pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

動作

$ yarn dev

以下ブラウザで確認

ttp://localhost:3000

参考

nuxt公式:https://ja.nuxtjs.org/docs/2.x/get-started/installation