Vue.js フロントエンドとバックエンドの共通コンポーネント開発経験 - 新人記事_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:21:57
オリジナル
1607 人が閲覧しました

プロジェクトのステータス

私はサーバーフレームワークとしてexpressを使用しています。バックグラウンドAPIインターフェイスを呼び出してデータを取得し、そのデータをHTMLにレンダリングするだけです。フロントエンド データとバックエンド データをレンダリングするには、テンプレートのセットを使用するのが最善です。つまり、テンプレートといくつかの単純なコンポーネントは同形であってもかまいません。

サーバー側で vue コンポーネントをレンダリングするには、vue-server プラグインを使用します。使い方はvueと似ています。これの目的は、サーバー側で最初の画面をレンダリングし、ページの表示速度を向上させることです。

開発コンポーネント

サーバーで使用する必要があるため、ノードで読み取れる単一の .vue ファイルを開発する方法が見つからず、一時的に諦めました。また、コンポーネント名をハードコーディングする次の方法は適切ではありません

Vue.component('my-component', { /* ... */ })  //这样写需要引入Vue,但是前后端的Vue不是一个东西
ログイン後にコピー

そこで、次のように単純なコンポーネント オブジェクトのみを出力することにしました。 modal.js

なぜテンプレートを直接記述する必要があるのでしょうか?

回答: インポート方法が 2 つあるため、フロントエンドは問題なくプリコンパイルできますが、バックエンド呼び出し import 'XXX.html' は実行されない可能性があります。

コンポーネントを出力する

#index.js 输出组件的文件import modal from './component/modal/modal'exports.modal = modal
ログイン後にコピー

コンポーネントを使用したフロントエンド

import Vue from 'vue'import {    picker,    modal,    toast,    alert,    preloader,    indicator,    actions,    pullToRefresh,    infiniteScroll} from '../src/index' //使用前端的Vue定义组件和指令的名称Vue.component('picker',picker);Vue.component('modal',modal);Vue.component('toast',toast);Vue.component('alert',alert);Vue.component('preloader',preloader);Vue.component('indicator',indicator);Vue.component('actions',actions)Vue.directive('pull-to-refresh',pullToRefresh)Vue.directive('infinite-scroll',infiniteScroll)
ログイン後にコピー

こうすることで、フロントエンドはこのコンポーネントを通常どおりに使用できるようになります

コンポーネントを使用したバックエンド

import {    picker,    modal,    toast,    alert,    preloader,    indicator,    actions,    pullToRefresh,    infiniteScroll} from '../src/index' let vueServer = require('vue-server') //服务端Vuelet Vue = new vueServer.renderer();//页面模板let tpl = fs.readFileSync(config.PATH_WEBAPP + '/states/index/template.html', 'utf-8');//vue实例vm = new Vue({    replace: false,    template: tpl,    components : {        picker : picker,        modal : modal,        toast : toast,        alert : alert    },    data: {            }});//渲染好html的事件vm.$on('vueServer.htmlReady', function (html) {    res.render('layout', {server_html:html}); //这个html就是vue服务端渲染好的,然后可以通过ejs或者其他模板引擎输出到layout中。});
ログイン後にコピー

ok この一般的なコンポーネントの記述方法は、比較的単純なプロジェクトにのみ適しています。リストやレイアウトなどのページ要素を生成するために一度バインドされるコンポーネントを作成する方が適しています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!