epik-dev/vue-items-list

此包的最新版本（1.1）没有可用的许可信息。

Vue项目列表Drupal模块（测试）。模块添加了一个“Vue项目列表”块，该块从API端点获取数据并将其渲染为项目列表。它使用Vue 3 / TypeScript组件进行渲染。

维护者

详细信息

github.com/e-Pik-Dev/Vue-items-list

源代码

问题

安装: 10

依赖项: 0

建议者: 0

安全: 0

星标: 0

观察者: 1

分支: 0

公开问题: 0

语言:Vue

类型:drupal-module

1.1 2024-08-15 11:10 UTC

Requires

  • php: >=8.0

Unknown License 5bf32f29b5bb75b50bcb331a266a9b97347e19f6

  • Yurii Pikalov <epikdev.woop@protonmail.com>

drupaltypescriptvue 3Vue items listePikDev

This package is not auto-updated.

Last update: 2024-09-26 11:44:03 UTC

README

这是一个测试Drupal模块，它添加了一个使用编译的Vue 3 SFC / TypeScript组件来渲染内容的Vue项目列表块。Vue组件从预定义的API端点（可配置）获取并列出数据。

安装

  1. 使用Composer安装模块

    composer require epik-dev/vue-items-list

  2. 安装完成后，要启用模块，请转到扩展页面（管理->扩展，{drupal_site}/admin/modules），找到Vue项目列表（测试模块），在其前面勾选复选框，然后单击安装按钮

  3. 在块布局页面放置块

    1. 以管理员身份登录您的Drupal站点
    2. 导航到块布局页面（管理->结构->块布局，{drupal_site}/admin/structure/block）
    3. 选择要放置块的块区域，例如标题（块区域名称特定于主题），然后单击放置块按钮
    4. 在打开的块列表中，找到Vue项目列表块或在其过滤文本框中输入
    5. 找到后，单击其旁边的放置块按钮，如有必要进行配置

配置选项

放置或配置块时，有两个配置选项可用

  • API端点：获取数据的API端点的URL
  • 显示的最大项目数：在块中显示的数据项的最大数量

技术信息

Vue组件使用Vite构建为原生ES模块，它将Vue SFC组件编译成单独的index.js和index.css文件，这些文件由模块加载以渲染其内容。

组件源代码文件夹是/vite/src，组件构建代码文件夹/component

但是，为了使此构建工作，此模块从CDN加载了单独的Vue esm版本，其URL在vue.cdn.esm键下指定在vue_items_list.libraries.yml中。

现代Vue开发最佳实践包括使用Vue SFC（单文件组件）、TypeScript和Vite工具。

Vue SFC是包含脚本、模板和样式的代码块的文件，它们组合并封装了组件的所有方面。要为Vue使用TypeScript，需要一个转换步骤，将TypeScript转换为JS。Vite处理所有上述操作，此外，它通过HMR加速开发并提供丰富的构建选项。

要求

  • Drupal 9.x，10.x。
  • PHP >= 8.0