ホームページ > 記事 > ウェブフロントエンド > Vue+Nuxt.js でサーバーサイドレンダリングを実現
今回はサーバーサイドレンダリングのVue+Nuxt.jsをお届けします。Vue+Nuxt.jsを使用したサーバーサイドレンダリングの注意点は何ですか?
1. クイックテンプレート
vue-cli がインストールされていることを前提として、すぐに nuxt プロジェクト テンプレートを作成できます
vue init nuxt-community/starter-template MyProject
MyProject はカスタマイズ可能なプロジェクト フォルダーの名前です
npm install 経由 (yarn install を使用するとスムーズなようです) 依存関係をインストールした後、直接 npm run dev を実行して開発環境でプロジェクトを開始できます
デフォルトの起動アドレスは http://localhost:3000 です/、これは package.json にあります 次の構成を追加してホストのポート番号を変更します
"config": { "nuxt": { "host": "0.0.0.0", "port": "7788" } },
開発が完了したら、npm run build を実行してコードをパッケージ化し、最後に npm start でサービスを開始します
2. 重要なディレクトリ
生成されたプロジェクトディレクトリは次のとおりです
ほとんどのフォルダ名はデフォルトでnuxtによって予約されており、変更できません
価格比較にとってより重要なディレクトリが3つあります:
1. コンポーネント コンポーネント ディレクトリ
は、通常、ヘッダー、フッター、その他のパブリック コンポーネントなどの非ページ レベルのコンポーネントを保存するために使用されます
このディレクトリ内のコンポーネントには、次のメソッドと特性があります。通常の vue コンポーネントであり、nuxt.js によって拡張されません2. レイアウト レイアウト ディレクトリ
default.vue の下にあるこのディレクトリ Default.vue を変更して、デフォルトのレイアウトを変更できます<template> <p> <my-header></my-header> <nuxt/> <my-footer></my-footer> </p> </template>ここで、
3. ページディレクトリ
は、nuxt がこのディレクトリに生成したページを保存するために使用されます。たとえば、上の図のページ構造は次のようなルーティング構成を生成します:
router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'about', path: '/about', component: 'pages/about.vue' }, { name: 'classroom', path: '/classroom', component: 'pages/classroom.vue', children: [ { path: 'student', component: 'pages/classroom/student.vue', name: 'student' }, { //定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件或目录 path: ':id', component: 'pages/classroom/_id.vue', name: 'classroom-id' } ] } ] }
さらに、このディレクトリの vue コンポーネントには、Nuxt.js によって提供されるいくつかの特別な機能もあります
その中で、
asyncDataメソッドの比較が一般的に使用されます。非同期データ処理をサポートします
このメソッドは、ページ コンポーネントを読み込むたびに呼び出されます、データを取得して現在のコンポーネントに返します
asyncData ({ params, error }) { return axios.get(`api/posts/${params.id}`) .then((res) => { return { name: res.data.name} }) .catch((e) => { error({ statusCode: 404, message: 'not found' }) }) }asyncData メソッドの最初のパラメータは、コンテキスト オブジェクトのコンテキスト、特定のプロパティですここで参照できます
asyncData メソッドはコンポーネントが初期化される前に呼び出されるため、メソッド内でこれを介してコンポーネントのインスタンス オブジェクトを参照する方法はありません
3. プラグインを使用しますプロジェクトに他のコンポーネントを導入する必要があります。サードパーティのプラグインはページに直接導入できるため、パッケージ化するときに、プラグインはページに対応する js にパッケージ化されますしかし、同じプラグインの場合、他のページでも紹介していますので、繰り返しパッケージ化させていただきます。ページングのパッケージ化が必要ない場合は、この時点でプラグインを設定できます
element-ui を例として取り上げます。element-ui をインストールした後、plugins ディレクトリに elementUI.js を作成し、次に nuxt を作成します。ルートディレクトリに設定項目 build.vendor と plugins を config.js に追加しますbuild: { vendor: ['~/plugins/elementUI.js'] }, plugins: [ {src: '~/plugins/elementUI.js'}, ]ここの plugins 属性は、vue.js プラグインを設定するために使用されます。つまり、Vue.user() メソッドを使用できます
プラグインの場合
、デフォルトでは src 属性のみが必要です。さらに、ファイルをクライアント側でのみパッケージ化してインポートできるように ssr: false を設定することもできます
。如果是像 axios 这种第三方 (不能 use) 插件,只需要在 plugins 目录下创建 axios.js
// axios.js import Vue from 'vue' import axios from 'axios' const service = axios.create({ baseURL: '/api' }) Vue.prototype.$ajax = axios export default service
然后在 build.vendor 中添加配置 (不需要配置 plugins)
build: { vendor: ['~/plugins/axios.js'] }
这样在打包的时候,就会把 axios 打包到 vendor.js 中
四、Vuex 状态树
如果在 store 目录下创建了 index.js,nuxt.js 会根据该目录下的文件创建 Vuex 状态树
// store/index.js import Vue from 'vue' import Vuex from 'vuex' import Axios from '~/plugins/axios.js'; Vue.use(Vuex) const store = () => new Vuex.Store({ state: { author: 'WiseWrong', info: '' }, mutations: { setInfo (state, val) { state.info = val } }, actions: { loadAboutMeInfo ({commit, state}) { return Axios.get(`/about`) .then(res => { console.log('ajax is success') console.log(res.data.info) commit('setInfo', res.data.info) }) .catch(err => { console.log('error') }) } } }) export default store
Nuxt.js 内置引用了 vuex 模块,不需要额外安装
上面的代码中,我在 actions 中写了一个 loadAboutMeInfo() 方法,用来请求 /api/about 接口
然后在 about.vue 页面中调用
// about.vue <template> <section class="container"> <p> <img src="~/assets/about.png" alt=""> </p> <h1>{{$store.state.info}}</h1> </section> </template> <script> export default { fetch({ store }) { return store.dispatch('loadAboutMeInfo') }, name: 'about', data () { return {} } } </script>
成果演示:
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がVue+Nuxt.js でサーバーサイドレンダリングを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。