$ mkdir nuxt-projects
$ cd nuxt-projects
$ npx create-nuxt-app hello


create-nuxt-app v3.2.0
<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="✨" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2728.svg">" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2728.svg">  Generating Nuxt.js project in .
? Project name: (nuxt-projects)
nuxt-projects $ npx create-nuxt-app hello

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in hello
? Project name: hello
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
npm WARN deprecated @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade y
our dependencies to the actual version of core-js@3.


Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js

🎉  Successfully created project hello

  To get started:

	cd hello
	npm run dev

  To build & start for production:

	cd hello
	npm run build
	npm run start

Errorが見えたらやり直してください。

 

pages/index.vue

 

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

明示的に変更した

 

$ npm run build
$ npm run start

 

次にプレーンにする

pages/index.vue

<template>
  <div class="container">
    <p>Hello</p>
  </div>
</template>

<script>

export default {
}
</script>

この状態にする

ここから作業を行う

 

Ctrl+cでNuxt.jsを停止させてdev(開発)モードにする

hello $ npm run dev

これでホットリローディングが有効になる

 

 

Axios

JSONPlaceholder

 

Vuex

Vue.jsコンポーネント => アクション => ミューテーション => ステート

コンポーネントはステートを直接操作するのはルール違反。

Action(アクション)
外部APIとやりとりしたい時に利用する

Muttations(ミューテーション)
Vuexのストアの状態を唯一変更できる存在

 

• $store.commit(‘ミューテーション名’, ‘ペイロード’)
• $store.dispatch(‘アクション名’, ‘ペイロード’)

 

methodsとcomputedの違い

•  methodsはメソッド
• computedはプロパティ

answerを()定義した場合

実行する時に{ answer() }とかっこが必要。computedは{ answer }となる。