README

这是一个用于 farmOS 的贡献模块，展示了使用 Vue.js 构建的页面打包策略。

注意：一些分支和标签只包含构建的模块。请参阅 开发分支 以获取完整的源代码。

安装

使用 Composer 和 Drush 在 farmOS 2.x 中安装 farmOS_vue_page_demo;

composer require symbioquine/farmos_vue_page_demo
drush en farmos_vue_page_demo

可用的发布版本可以在 https://packagist.org.cn/packages/symbioquine/farmos_vue_page_demo 查看

常见问题解答

这是怎么工作的？

此模块的 JavaScript 部分通过 npm run build 构建，并放置在 Drupal 模块目录的 `js/' 文件夹中。

此模块的 Drupal 部分注册了一个简单的控制器，该控制器渲染一个包含构建的 JavaScript 和 Vue.js 绑定的 DOM 节点的页面。

关于通过 Composer 安装的说明？

此存储库有两个分支 development 和 release。此包的开发工作流程仅涉及向 development 分支和带有 unbuilt- 前缀的标签推送更改。

当推送至 development 分支和带有 unbuilt- 前缀的标签时，会触发 GitHub 动作。该操作执行 npm run build 步骤，并将生成的构建模块代码推送到 release 分支或常规语义版本化标签。

出于故意，未在存储库根目录中包含 Composer package.json 文件。

由于 Packagist 的工作方式，Git 存储库的主要分支必须设置为 release，以确保 Packagist 可以找到 Composer package.json 文件。

那么，关于开发中的实时重新加载怎么办？

此存储库的 开发分支 的 docker/ 目录包含一个 docker-compose.yml 文件，该文件将此存储库的 farmos_vue_demo_page/ 目录挂载到容器中。然后，该目录用作 Composer 安装 Drupal 模块的存储库源。如果此包的 JavaScript 部分已经构建，则当访问 https://:80/vue_demo_page 的 farmOS 服务器时，模块将正常工作，但 Vue.js 代码将不会有实时重新加载。

接下来，使用 Webpack Dev 服务器代理 farmOS 容器，但将与此模块相关的资产请求替换为开发版本 - 这些版本中注入了特殊代码，以支持在 Vue.js 源代码更改时进行实时重新加载。

如何推送新版本？

从此存储库的 开发分支

# Add/commit your changes
git add [...]
# Update NPM package version and commit
npm --no-git-tag-version version --force patch
git commit
# Tag the release with the unbuilt prefix
git tag unbuilt-v9000.0.1
# Push the development branch and new tag
git push --atomic origin HEAD:development unbuilt-v9000.0.1

开发

从此存储库的 开发分支

启动/重新创建 farmOS 容器；

cd docker/
./destroy_and_recreate_containers.sh

运行开发代理服务器；

npm install
npm run dev

访问 https://:8080/vue_demo_page 上的示例页面