facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(ページの作成:「==nuxt-appを使ってプロジェクト生成== yarn create nuxt-app project1」)
 
(→‎手動でプロジェクト作成)
 
(同じ利用者による、間の2版が非表示)
行1: 行1:
 
==nuxt-appを使ってプロジェクト生成==
 
==nuxt-appを使ってプロジェクト生成==
 
  yarn create nuxt-app project1
 
  yarn create nuxt-app project1
 +
 +
===動作===
 +
$ cd project1
 +
$ yarn dev
 +
 +
以下ブラウザで確認
 +
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

「http://wiki.nonip.net/index.php?title=Javascript/nuxtjs/インストール&oldid=13047」から取得