ポートレットでVueを使用する

ポートレットでVueを使用する

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Vueプロジェクトを手動で作成するか、 npm Vueポートレットテンプレート を使用して、必要な構成の多くを自動化できます。 便宜上、すべての手動ステップを以下にリストします。 このチュートリアルでは、既存のVueプロジェクトを移行する場合でも、新規プロジェクトを構築する場合でも、ポートレットでVue JSを使用する方法を示します。 ポートレットの構造の詳細については、 npm Vueポートレットテンプレート リファレンスドキュメントを、今すぐテストおよびデプロイできるVueポートレットの例については、 npm Vueポートレットサンプル を参照してください。 OSGiモジュールを作成し、そのメタデータを構成することから始めます。

メタデータの構成

次の手順に従って、モジュールを作成し、Vueのメタデータを構成します。

  1. OSGiモジュールを作成します。 たとえば、 npm Vueポートレットテンプレート使用します。

  2. プロジェクトの bnd.bnd ファイルに Web-ContextPath BND Headerを指定します。 以下は、npm Vueポートレットテンプレートのデフォルト構成です。

    Web-ContextPath: /my-npm-vue-portlet
    
  3. .babelrc ファイル を作成し、次のプリセットを追加します。

    {
        "presets": ["env"]
    }
    
  4. オプションで、プロジェクトのルートフォルダーに .npmbundlerrc ファイル を追加します。 このファイルは必要ありません。 ただし、このファイルを構成して、ファイルを無視するなど、ニーズに合わせてliferay-npm-bundlerをカスタマイズできます。

  5. build.gradle ファイルに次の依存関係を含めます。

    compileOnly group: "com.liferay", 
    name: "com.liferay.frontend.js.loader.modules.extender.api", 
    version: "2.0.2"
    
  6. プロジェクトに package.json が存在しない場合は作成し、以下に示す構成を追加します。 "main" JSパスを更新して、アプリのメインJSファイルを指すようにします。 liferay-npm-bundler がビルドスクリプトの最後に追加されることに注意してください。 これより前に、プロジェクトで必要な追加のビルドプロセスをリストします。

    {
        "dependencies": {
            "vue": "2.4.4"
        },
      "description": "Vue.js Portlet",
        "devDependencies": {
            "babel-cli": "^6.26.0",
            "babel-preset-env": "^1.7.0",
            "liferay-npm-bundler": "^2.0.0"
        },
        "main": "js/index.js",
        "name": "my-npm-vuejs-portlet",
        "scripts": {
            "build": "babel --source-maps -d 
        build/resources/main/META-INF/resources 
        src/main/resources/META-INF/resources && liferay-npm-bundler"
        },
        "version": "1.0.0"
    }
    

ポートレットでES2015 +構文を使用するには、ブラウザー用にトランスパイルする必要があります。 ビルドスクリプトに含まれるBabelがこれを処理します。

次ポートレットを構成できます。

ポートレットの構成

次の手順に従って、ポートレットを構成します。

  1. Portlet.class サービスを実装するコンポーネントクラスを作成します。

    @Component(
        immediate = true,
        property = {
            "com.liferay.portlet.display-category=category.sample",
            "com.liferay.portlet.instanceable=true",
            "javax.portlet.init-param.template-path=/",
            "javax.portlet.init-param.view-template=/view.jsp",
            "javax.portlet.name=" + MyNpmVuejsPortletKeys.MyNpmVuejs,
            "javax.portlet.resource-bundle=content.Language",
            "javax.portlet.security-role-ref=power-user,user"
        },
        service = Portlet.class
    )
    public class MyNpmVuejsPortlet extends MVCPortlet {
      ...
    }
    
  2. VueプロジェクトにCSSスタイルが含まれている場合は、次の追加プロパティを追加して、メインCSSファイルの場所を指定します。

    "com.liferay.portlet.header-portlet-css=/css/main.css"
    

    このパスはリソースパスに関連していることに注意してください。 Sassを使用している場合は、このプロパティに .scss 拡張子をドロップし、代わりに .css を使用します。 たとえば、メインCSSファイルが src / main / resources / META-INF / resources / css / app.scssにある場合、次の構成になります。

    "com.liferay.portlet.header-portlet-css=/css/app.css"
    
  3. コードの保守性を向上させるために、 あなたのモジュールのパッケージ名のエイリアスに使用NPMResolverのAPI。 次の例では、モジュールの名前を bootstrapRequireとして公開しています。

    @Override
    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {
    
        JSPackage jsPackage = _npmResolver.getJSPackage();
    
        renderRequest.setAttribute(
            MyNpmVuejsWebKeys.BOOTSTRAP_REQUIRE,
            jsPackage.getResolvedId() + " as bootstrapRequire");
    
        super.doView(renderRequest, renderResponse);
    }
    
    @Reference
    private NPMResolver _npmResolver;
    
  4. init.jsp内に、次のJavaスクリプトレットを追加して、ポートレットの view.jspbootstrapRequire 変数にアクセスします。

    <%
    String bootstrapRequire = (String)renderRequest.getAttribute(
      MyNpmVuejsWebKeys.BOOTSTRAP_REQUIRE
    );
    %>
    

次に、アプリのコンポーネントをレンダリングする方法を学びます。

コンポーネントのレンダリング

アプリコンポーネントをレンダリングするには、次の手順に従います。

  1. アプリのメインJSファイル(たとえば、index.js )内で、以下の関数を使用してコンポーネントをレンダリングします。

    import Vue from 'vue/dist/vue.common';
    
    export default function(portletNamespace) {
        // Application 1
        new Vue({
            el: `#${portletNamespace}-root`,
            data: {
                message: 'Hello from Vue.js!',
            },
            methods: {
                reverseMessage: function() {
                    this.message = this.message
                        .split('')
                        .reverse()
                        .join('');
                },
            },
        });
    }
    
  2. view.jsp を開き、コンポーネントを収容する要素コンテナを追加します。 次に、 <aui:script> を追加し、 属性値を必要とするため、エイリアスモジュール名を渡します。 最後に、前の手順でエクスポートしたモジュールの デフォルト 関数を呼び出し、ポートレット名前空間を渡します。 <portlet:namespace /><div>id 追加すると、ポートレットに固有であり、ページ上の既存の要素と衝突しません。

    <%@ include file="/init.jsp" %>
    
-root ">
    <aui:script require="<%= bootstrapRequire %>">
        bootstrapRequire.default('<portlet:namespace />');
    </aui:script>

これで、プロジェクトでVueを使用する方法がわかりました!

関連トピック

ポートレットでのAngularの使用

ポートレットでReactを使用する

ポートレットでnpmを使用する

« ポートレットでReactを使用するポートレットでのAngularの使用 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています