怎么将Vue.js应用程序与Drupal做一个集成

本文小编为大家详细介绍“怎么将Vue.js应用程序与Drupal做一个集成”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么将Vue.js应用程序与Drupal做一个集成”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

    1.使用自定义模块：

将任何 Vue.js 应用程序与 Drupal 集成的主要也是最基本的步骤之一就是创建自定义模块。但这究竟意味着什么呢？那么，开发人员需要为 Vue.js 应用程序开发一个新的自定义模块。看，这个依赖项所做的就是添加通用的 Vue 库。但这还不是全部。开发人员还可以将上述这些通用 Vue 库直接添加到他们在此过程开始时创建的自定义模块中。话虽如此，我们必须提到将它们放在另一个模块中会是一个更好的主意，因为这样开发人员也可以在以后重用它们。

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 不仅有助于构建新的 Vue 应用程序，而且还使开发人员能够在需要大量设置的情况下构建所述应用程序。它通过构建目录结构和生成应用程序编译设置等来实现。建议将应用程序放在目标模块的子目录中；例如，模块名称应用程序

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.在块中集成应用程序库：

块和段落的美妙之处在于它们使开发人员能够将内容放置在应用程序的编辑器可访问部分中，并仅集成必要的资产，所述块或段落出现在页。您可以通过自定义块的构建方法执行此类集成，并将相关库添加到返回的渲染数组中。

Vue.js 组件：

public function build() {

  ...

  return [

    '#theme' => 'module_name_block',

    ...

    '#attached' => [

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

    ],

    ...

  ];

}

读到这里，这篇“怎么将Vue.js应用程序与Drupal做一个集成”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。