Vue SSR Nuxtプローブ

1.準備

Nuxt.js       Vue.js        。
      /            ，Nuxt.js           UI  。

1.1プロジェクトの初期化npx create-nuxt-app nuxt-demo

> Generating Nuxt.js project in xx/code/nuxt-demo
? Project name nuxt-demo
? Project description My fantastic Nuxt.js project
? Use a custom server framework koa
? Choose features to install Axios
? Use a custom UI framework element-ui
? Use a custom test framework none
? Choose rendering mode Universal
? Author name xx
? Choose a package manager npm

1.2誤報
実行cd nuxt-demo && npm run devエラー

error  in ./server/index.js

Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

element-uiの更新によりnuxtは古いモジュールに依存するため、古いバージョンのelement-uiに降格すればよい.

npm i [email protected] -S

2.nuxtベース

ルーティング

テンプレート

非同期データ

vuex

2.1ルーティング
Pageディレクトリのファイル名、すなわちルーティング(作成、構成)
2.2テンプレート
テンプレートlayoutsディレクトリの下pageディレクトリの下のコンポーネントは、layoutコンポーネントのnuxtラベルの下のvueコンポーネントに挿入され、テンプレートの使用を指定できます.

// page/about.vue
export default {
    name: 'about',
    layout: 'about'
}

// layout/about.vue

2.3非同期データ
2.3.1サービス側インタフェース
インタフェースルーティング

// server/interface/city.js
const Router = require('koa-router')

const router = new Router({
  prefix: '/city'
})

router.get('/list', async(ctx) => {
  ctx.body = ['  ', '  ']
})

module.exports = router

ルーティングミドルウェアの使用

// server/index.js
...
const cityInterface = require('./interface/city')
...
app.use(cityInterface.routes(), cityInterface.allowedMethods())
...

2.3.2クライアント要求データ

// page/about.vue
...
async created() {
   this.list = await this.$axios.$get('/city/list')
}

2.3.3サービス側データレンダリング

// page/about.vue
...
async asyncData({ $axios }) {
  const list = await $axios.$get('/city/list')
  return { list }
}

2.4 vuex使用

Nuxt.js              store   ，       ，        ：

   vuex   
  vuex       vendors       
   Vue      store    
Nuxt.js        store    ，       ：

    ： store/index.js      Vuex.Store   
    ： store        .js                     （  ，index     ）

fetchメソッドは、アプリケーションのステータスツリーデータをレンダリングページの前に埋め込むために使用されます.asyncDataメソッドと同様に、コンポーネントのデータは設定されません.

// store/city.js
export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list = text
  }
}

export const actions = {
  async ADD ({ commit }) {
    const data = await this.$axios.$get('/city/list')
    commit('add', data)
  }
}

// page/about.vue
export default {
    computed: {
      lists () {
        return this.$store.state.city.list
      }
    },
    async fetch ({ store, params }) {
      await store.dispatch('city/ADD');
    }
}

Classic mode for store/ is deprecated and will be removed in Nuxt 3エラー解決Nuxtがstoreに対してメソッドの判断をしたため、exportがメソッドであれば本明細書の警告情報が表示されます.私たちのstate、mutations、actionsなどを直接exportすることができます.new Vuex.Store(...)方式を使用しない