WindowsでいきなりNuxt.jsに入門してみる

Nuxt.jsはVue.js製ユニバーサルJavascriptアプリケーションフレームワーク。
Vueから学ぶべきだろうけど必要に応じてって感じで!

必要なもの

node.js
https://nodejs.org/からダウンロード&インストール。

Nuxtプロジェクト作成

vue-cliがインストールされていなければグローバルにインストールする。

Nuxtスターターテンプレートを使ってプロジェクトを作成

http://localhost:3000

※終了するときは「Ctrl+c」ね

Nuxtでカウントアップのサンプル

せっかくなので動作確認を兼ねてカウントアップ/ダウンのサンプルを作る。

【Vuexで状態管理するストア作成】

記述方法にモジュールモードとクラシックモードが存在するが今回はモジュールモードで!

store/conter.js

state 使用するデータを定義
mutations stateを更新するためのメソッドを定義

他にもデータを更新するメソッドを定義するactionsなど・・・

【ページ追加】

pages/sample/index.vue

※export default文

data() データを定義
computed: 算出プロパティを定義
methods: メソッドを定義

他にも
mounted()やcomponentsがあるがまたの機会に・・・

http://localhost:3000/sample/

build&startでプロダクションモード

開発モード(npm run dev)で動かしてきたが最終的にはビルドしてプロダクションモードで立ち上げる。

アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします

プロダクションモードでサーバーを起動します

静的ファイルに書き出す

distディレクトリ以下に静的ファイルが生成される。

SPA(SinglePageApplication)

nuxt.config.jsに追記

よくわからないままやってみたけど
こんな感じね!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする