Vue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。

Vue フレームワークは、非常に人気のある JavaScript フロントエンド フレームワークであり、よりスムーズで効率的な MVVM パターンの理解に重点を置いた Evan You によって開発されたフレームワークです。この登場により、フロントエンド開発者は優れたユーザー エクスペリエンスを備えた Web アプリケーションをより簡単に開発できるようになります。この記事では、読者がフレームワークの使用スキルをよりよく習得できるように、Vue フレームワークのサーバーおよびクライアントのデプロイ方法を紹介します。

1. クライアント デプロイメント

Vue フレームワークのクライアント デプロイメントは比較的簡単です。フレームワーク ファイルを HTML ファイルに導入するだけです。一般的に使用される導入方法は 2 つあります:

1. CDN を使用してインポートする:

Vue の公式 CDN アドレスを直接使用して、Vue.js ファイルを HTML ファイルにインポートできます (例:

2)。インポートするソース ファイル:

Vue のソース コードを直接ダウンロードして、対応するファイルを HTML ファイルに導入することもできます。たとえば、次のようになります。

導入後、次のことができます。 Vue フレームワークを直接使用します。

2. サーバー側のデプロイメント

Vue フレームワークをサーバー側にデプロイする前に、まず関連する Node.js 環境をインストールする必要があります。 Node.js 環境の準備ができたら、Vue サーバー側レンダリングの開発を開始できます。

1. プロジェクトの作成と構成

プロジェクトを作成した後、package.json ファイルに関連する依存関係を導入する必要があります。その中で、Vue は Vue サーバーに関連しています。

{
  "dependencies": {
    "vue": "^2.5.0",
    "vue-server-renderer": "^2.5.0"
  }
}

2. サーバー側のコードの作成

次に、Node の express フレームワークを使用して、サーバー側のコードを作成する必要があります。 .js を使用してプロジェクトをビルドし、Vue サーバー レンダリング ミドルウェアをプロジェクトに追加します。例:

const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: '
Hello {{ name }}
',
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      
      
        

        ${html}
      
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

上記のコードは、Vue SSR の基本機能を実装するだけです。サーバーの起動後、ページにアクセスすると、Vue コンポーネントによってレンダリングされたページ コンテンツが返されます。

コード vue-server-renderer で createRenderer() メソッドを使用すると、レンダラ オブジェクトが作成され、そのオブジェクトがテンプレートとして使用されることがわかります。パラメータは次のとおりです。 renderToString() メソッドに渡されます。このメソッドは、Vue コンポーネントを HTML 文字列にレンダリングし、結果をフロントエンド ページに返します。

3. Webpack の設定

プロジェクトで Webpack を使用する場合は、Webpack 設定ファイルで Vue ファイルのコンパイル ルールを設定する必要があります (例:

module.exports = {
  // ... 其他配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

vue-loader は、.vue ファイルを処理するために Webpack に来て、主に .vue タイプのファイルを実行可能な JS コードに変換します。

const Vue = require('vue')
const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    template: `
Hello {{ name }}！
`,
    data: {
      name: 'Vue SSR'
    }
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      return res.status(500).end('Internal Server Error')
    }
    res.end(`
      
      
        
          
          
        

        ${html}
      
    `)
  })
})

const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`Server started at localhost:${port}`)
})

express フレームワークを使用してルーティングを構成し、ルーティング リクエストを判断した後にページ全体をレンダリングし、ブラウザに返します。

以上がVue フレームワークでのサーバーとクライアントのデプロイ方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。