メモ > 技術 > フレームワーク: Nuxt.js > プロジェクトでアプリを作成
■プロジェクトでアプリを作成
>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs
>npx create-nuxt-app test_project
create-nuxt-app v2.15.0
Generating Nuxt.js project in test_project
Project name test_project
Project description My dazzling Nuxt.js project
Author name refirio
Choose programming language JavaScript
Choose the package manager Npm … yarn から Npm に変更した
Choose UI framework None
Choose custom server framework None (Recommended)
Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
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 (Press <space> to select, <a> to toggle all, <i> to invert selection)
>cd test_project
>npm run dev
─────────────────────────────────────────────
│ │
│ Nuxt.js v2.12.2 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
─────────────────────────────────────────────
i Preparing project for development 16:22:24
i Initial build may take a while 16:22:24
√ Builder initialized 16:22:24
√ Nuxt files generated 16:22:24
√ Client
Compiled successfully in 8.33s
√ Server
Compiled successfully in 7.27s
i Waiting for file changes 16:22:34
i Memory usage: 196 MB (RSS: 253 MB) 16:22:34
i Listening on: http://localhost:3000/ 16:22:34
以下にアクセスすると「test_project My spectacular Nuxt.js project」というデフォルトページが表示される
http://localhost:3000/
■プロジェクト作成時にエラー
「Choose the package manager」
で「yarn」を「Npm」に変更したが、yarnのままだとプロジェクト作成時に以下のエラーになった
詳細は要調査
- Installing packages with yarnTrace: Error: spawn yarn ENOENT
at notFoundError (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:6:26)
at verifyENOENT (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:40:16)
at ChildProcess.cp.emit (C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\node_modules\sao\node_modules\cross-spawn\lib\enoent.js:27:25)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) {
code: 'ENOENT',
errno: 'ENOENT',
syscall: 'spawn yarn',
path: 'yarn',
spawnargs: [ 'install' ]
}
at C:\Users\refirio\AppData\Roaming\npm-cache\_npx\12656\node_modules\create-nuxt-app\cli.js:46:17
at processTicksAndRejections (internal/process/task_queues.js:97:5)
■ファイル構成
プログラム作成において重要になるのは以下のフォルダ
components
layouts
pages
見た目を調整する際は以下のフォルダも関係してくる
assets
static
以下を編集することで、初期ページの内容を変更できる
layouts\default.vue
pages\index.vue
components\Logo.vue
■コンテンツの編集
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<template>
<section class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<pre>{{ now }}</pre>
</section>
</template>
<script>
export default {
data: function() {
return {
title: 'Hello',
message: 'This is a message',
now: 'wait...'
};
},
created: function() {
setInterval(() => {
var d = new Date();
this.now = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}, 1000)
}
}
</script>
<style>
.container {
padding: 5px 10px;
}
h1 {
color: #345980;
}
pre {
padding: 10px;
background-color: #efefef;
}
hr {
margin: 10px 0;
}
</style>
■他のページを追加
pages内にファイルを作成すると、自動的にページとして認識される
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<router-link to="/other">Go to Other</router-link>
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\other.vue
<template>
<section class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<router-link to="/">Go to Top</router-link>
</section>
</template>
<script>
export default {
data: function() {
return {
title: 'Hello',
message: 'これは別のページです。'
};
}
}
</script>
<style>
.container {
padding: 5px 10px;
}
h1 {
color: #345980;
}
hr {
margin: 10px 0;
}
</style>
■パラメーターを取得
pages内に階層ありでファイルを作成すると、その名前をもとに値を取得できる
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<router-link to="/test/test1/test2/test3">Go to Other</router-link>
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\test\_x\_y\_z.vue
<template>
<section class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<router-link to="/">Go to Top</router-link>
</section>
</template>
<script>
export default {
data: function() {
return {
title: 'Hello'
};
},
computed: {
message: function() {
let x = this.$route.params.x;
let y = this.$route.params.y;
let z = this.$route.params.z;
return 'x=' + x + ', y=' + y + ', z=' + z;
}
}
}
</script>
<style>
.container {
padding: 5px 10px;
}
h1 {
color: #345980;
}
hr {
margin: 10px 0;
}
</style>
■Vuexで状態を管理する
store内にファイルを作成し、各ページから参照する値を用意できる
読み込んで反映されない場合、サーバの再起動とページの再読み込みを試す
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\store\index.js
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state: function() {
return {
message: 'これはストアメッセージです。',
};
}
})
}
export default createStore
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<p>{{ $store.state.message }}</p>
■ミューテーションで値を変更する
mutationsで命令を定義し、それを呼び出すことでstateの内容を変更できる
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\store\index.js
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state: function() {
return {
message: '数値をカウントします。',
counter: 0,
};
},
mutations: {
count: function(state) {
state.counter++;
},
reset: function(state) {
state.counter = 0;
}
}
})
}
export default createStore
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<template>
<section class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ $store.state.message }}</p>
<hr>
<div class="counter"
@click="$store.commit('count')"
@click.ctrl="$store.commit('reset')"
>
clicked: {{ $store.state.counter }}
</div>
</section>
</template>
<script>
export default {
data: function() {
return {
title: 'Hello',
message: 'This is a message'
};
},
}
</script>
<style>
.container {
padding: 5px 10px;
}
h1 {
color: #345980;
}
div.counter {
padding: 10px;
background-color: #efefef;
}
hr {
margin: 10px 0;
}
</style>
■外部データを読み込み
※axiosを使うと、非同期で外部データを読み込むことができる
※プロジェクト作成時にaxiosをインストールすることもできる
※requireでaxiosを読み込むと、async function() で定義した関数内で await axios.get() を使ってデータを読み込める
>cd C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project
>npm install --save axios
>npm run dev
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\index.vue
<router-link to="/axios">Go to Axios</router-link>
C:\localhost\home\refirio_org\public_html\memos\nuxtjs\test_project\pages\axios.vue
<template>
<section class="container">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<pre>{{ result_data }}</pre>
<router-link to="/">Go to Top</router-link>
</section>
</template>
<script>
const axios = require('axios');
let url = '/README.md';
//let url = 'http://refirio.org/page/about';
export default {
data: function() {
return {
title: 'Hello',
message: 'これはデータ取得のテストです。'
};
},
asyncData: async function() {
let result = await axios.get(url);
return { result_data: result.data };
},
}
</script>
<style>
.container {
padding: 5px 10px;
}
h1 {
color: #345980;
}
pre {
padding: 10px;
background-color: #efefef;
}
hr {
margin: 10px 0;
}
</style>