App下載

在開發(fā)中如何將Vue.js應(yīng)用程序與Drupal做一個集成?將Vue.js應(yīng)用程序與Drupal做一個集成的方法!

城春草木深 2021-09-17 15:10:39 瀏覽數(shù) (3068)
反饋

自 2000 年代初以來,互聯(lián)網(wǎng)內(nèi)容在互聯(lián)網(wǎng)上的流行迅速增長,已將世界帶到了另一種技術(shù)的門口:內(nèi)容管理系統(tǒng)。使用 JavaScript,前端界面有很多選擇?,F(xiàn)在,我們確實擁有像 Drupal 這樣充足的技術(shù)來構(gòu)建這些平臺,對動態(tài)和交互式體驗不斷增長的需求使人們關(guān)注其他能夠滿足這些期望的技術(shù)。 

這就是 vue.js,一個以支持豐富的交互式應(yīng)用程序開發(fā)而聞名的 JavaScript 框架。Vue.js 是一種流行的 JavaScript 框架,用于創(chuàng)建交互式應(yīng)用程序。您知道它通過簡單靈活的 API 提供數(shù)據(jù)反應(yīng)組件嗎?此外,您可以將其用作庫以向現(xiàn)有網(wǎng)站添加交互元素/塊。如果您希望顯著提升用戶體驗,它現(xiàn)在已成為公認的首選資源。 

因此,如果您在市場上尋求此類解決方案,并希望在您的 Drupal CMS 上更上一層樓,這里有一些將它們與 vue.js 應(yīng)用程序集成的技巧。

    1.使用自定義模塊:將任何 Vue.js 應(yīng)用程序與 Drupal 集成的主要也是最基本的步驟之一就是創(chuàng)建自定義模塊。但這究竟意味著什么呢?那么,開發(fā)人員需要為 Vue.js 應(yīng)用程序開發(fā)一個新的自定義模塊???,這個依賴項所做的就是添加通用的 Vue 庫。但這還不是全部。開發(fā)人員還可以將上述這些通用 Vue 庫直接添加到他們在此過程開始時創(chuàng)建的自定義模塊中。話雖如此,我們必須提到將它們放在另一個模塊中會是一個更好的主意,因為這樣開發(fā)人員也可以在以后重用它們。

Vue.js 組件:

name: Module Name

type: module

description: 'Provides functionality for ...'

package: Project Name

core_version_requirement: ^8.8 || ^9

dependencies:

  - projectname_system:projectname_system

version: 1.0

    2.利用 Vue CLI:Vue CLI 不僅有助于構(gòu)建新的 Vue 應(yīng)用程序,而且還使開發(fā)人員能夠在需要大量設(shè)置的情況下構(gòu)建所述應(yīng)用程序。它通過構(gòu)建目錄結(jié)構(gòu)和生成應(yīng)用程序編譯設(shè)置等來實現(xiàn)。建議將應(yīng)用程序放在目標模塊的子目錄中;例如,模塊名稱應(yīng)用程序

Vue.js 組件:

{

  "name": "module-name-app",

  "version": "0.1.0",

  "private": true,

  “scripts”: {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build --target lib --formats umd-min --name module_name_app src/main.js",

    "lint": "vue-cli-service lint",

    "lint-no-fix": "vue-cli-service lint --no-fix --max-warnings 0",

    "dev": "vue-cli-service build --target lib --formats umd-min --name module_name_app src/main.js --watch"

  },

...

}

    3.在塊中集成應(yīng)用程序庫:塊和段落的美妙之處在于它們使開發(fā)人員能夠?qū)?nèi)容放置在應(yīng)用程序的編輯器可訪問部分中,并僅集成必要的資產(chǎn),所述塊或段落出現(xiàn)在頁。您可以通過自定義塊的構(gòu)建方法執(zhí)行此類集成,并將相關(guān)庫添加到返回的渲染數(shù)組中。

Vue.js 組件:

public function build() {

  ...

  return [

    '#theme' => 'module_name_block',

    ...

    '#attached' => [

      'library' => 'module_name/module-name-app',

    ],

    ...

  ];

}

世界各地無數(shù)專家一致認為,將 Vue.js 用于自己的Drupal 網(wǎng)站開發(fā)項目無疑是一個好主意。畢竟,它不僅是一個對開發(fā)人員相當友好的框架,而且非常敏捷,帶來了壯觀的生態(tài)系統(tǒng),并提供了無數(shù)其他好處的世界。那么,您所需要的只是確保您牢記行業(yè)最佳實踐和技巧,例如上面列出的那些,以便快速輕松地將 vue.js 應(yīng)用程序與 Drupal 集成。


0 人點贊