「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
