※ 随時更新予定
目次
概要
Vue.jsをベースに、更に色々な機能を取り揃えたフレームワーク。
SPA、SSR、Vue Router+自動ルーティング、Vuex、デフォルトテンプレート等の機能がある。
Vue CLIよりも使いやすくなっている。簡単なSPAでもNuxtで作るのが最適解だと思う。
環境構築
create-nuxt-appを使うのがベスト！下記の手順で基本的にok
- npm i -g create-nuxt-app ※create-nuxt-appを準備していない時
- npx create-nuxt-app アプリ名 ※各設定は必要に応じて選択。基本enterでok。
- デフォルトの画像やコンポーネントを削除し、環境の準備完了
機能
- vue-router標準装備で、なおかつpageディレクトリに配置したファイルを元に自動ルーティングを行ってくれる。
- vuex標準装備で、this.$storeでアクセス可能。
- axiosやbootstrapもインストールの時に設定することで、this.$axiosのような形で利用が簡単。
- Express.jsの利用も視野に入れられているため、サーバサイドJSも組み込みやすい。
Tips
ルーティングのルール
pagesディレクトリ内で任意のディレクトリとindex.vueを作成することで、自動的にルーティングが作成される。
例1:） page1/index.vue を作成
npm run dev を実行
localhost:3000/page1/ にアクセスできる。
例2:） page1/_id.vue を作成
npm run dev を実行
localhost:3000/page1/(任意の値) にアクセスできる。
※ (任意の値)部分は、this.$route.params.id で取得可能
※ asyncDataで利用する場合は、 context.route.params.id
Vuex(Store)は、モジュールモード推奨
まず、Vuexとは、コンポーネント間でやり取りする共通の値や処理をまとめてあるもので、コンポーネントのどこからでも利用可能です。
モジュールモードとは、store ディレクトリ内のすべての *.js ファイルが 名前空間付きモジュール に変換されます（index はルートモジュールとして存在します。）
index内で、名前空間を分ける従来の書き方は廃止される様です。
例:)store/namaekuukantest.jsというファイルを作り、stateにアクセスする場合
this.$srore.state.namaekuukantest.プロパティ名 になります。
Vuex(Store)のモジュールのテンプレート
state, getters, mutations, actionsが基本構成です。
state → 共通で利用する値を保持する役割。
getters → stateの値を取得する役割。コンポーネントのcomputedで利用しやすい。
mutations → stateの値を変更する役割。コンポーネントから直接実行するかactionsから利用。
actions → 通信処理で値を取得したり、複雑な共通処理を行ったりする役割。
export const state = () => ({
list: {},
targetId: '',
})
export const getters = {
getList(state) {
return state.list
},
getTargetId(state) {
return state.targetId
},
getListById(state){
return state.list[state.targetId] || {}
},
}
export const mutations = {
setList(state, register) {
state.list = register
},
setTargetId(state, id) {
state.targetId = id
},
}
export const actions = {
async getAll({commit}) {
const res = await this.$axios.$get('/api/register/all/')
commit('setList', res)
},
async getById({commit}, id) {
const res = await this.$axios.$get(`/api/register/${id}`)
return res
}
}
コンポーネントからVuexの値を参照する場合
直接参照する場合
this.$store.state.モジュール名（ファイル名）.stateに記述したプロパティ
gettersを利用する場合
- script部でvuexを読み込みmapGettersを利用する
import { mapGetters } from 'vuex'
- computedでgettersを取得
※記述はgetListというゲッターをlistという名前で利用する場合
computed: {
...mapGetters({
list: 'モジュール名（ファイル名）/getList'
})
}
異なるコンポーネントで、共通のmethods等を利用したい場合
mixin を利用しましょう！
1.分かりやすい様にNuxtプロジェクトの直下に mixins というディレクトリを作成する。
2.作成したいmixinファイルを作成する。
例： mixins/InputValidation.js を作成
export const InputValidation = {
methods: {
isEmpty(str) {
return str === "" || str === undefined || str === null
},
isLength(length, str) {
const validStr = String(str)
return validStr.length > length
}
}
}
3.mixinを利用するコンポーネントファイルのscript部でimportする
import { FileEvaluableImage } from '@/mixins/FileEvaluableImage'
4.mixins という項目を作成し、利用するmixinを指定する。
export default {
mixins: [ FileEvaluableImage ],
...
}
どのファイルからでも参照可能なutilを作成する方法
1.pluginsディレクトリにutils.jsを作成（名前はなんでもok）
2.nuxt.config.jsのpulginsに下記を記述する。
plugins: [
'@/plugins/utils'
],
3.utils.jsに共通で利用したい処理を記述する。
const deepCopy = (obj) => {
return JSON.parse(JSON.stringify(obj))
}
export default ({}, inject) => {
inject('deepCopy', deepCopy)
}
4.実際に利用する時は、 this.$登録名で記述する。
this.$deepCopy(state.list)
Nuxt.jsでapiを利用する
1.nuxt.config.jsの任意の場所に下記を記述する。
serverMiddleware: [
'~/api/'
],
2.api/にindex.jsを作成し、apiの設定を記述する。
（設定内容は、Express.jsでミニマムなローカルサーバ構成で説明）
npm run devでローカルサーバを立ち上げた際に、他の機器からAPIにアクセスする場合
nuxt.config.jsに以下を記載。
server: {
port: (任意のポート番号),
host: '0.0.0.0'
},
ただし、アクセスする際は、 http://localhost:ポート/api/○○ でアクセスする。