README

Batch Craft Starter

一个有偏见的Craft CMS项目入门，集成了Vue.js、Tailwind CSS和Docksal配置。
探索文档

报告错误 · 请求功能

关于项目

这个项目的想法是创建一个Craft CMS入门项目，使我们能够快速地上手并开发项目。

此入门项目已配置好，可以直接用于开发，包括

Tailwind CSS
Vue.js
craft-webpack - 我们的Webpack构建配置
Craft CMS与Twigpack
Jest进行前端测试
Docksal配置

构建于

入门

要使用此入门项目创建新项目，请按照以下步骤操作。

先决条件

为了使用此入门项目，您需要确保Docksal运行正常。您可以在https://docksal.io/找到说明。

安装

通过composer创建新项目

fin rc composer create-project batch/craft myproject --remove-vcs

将'myproject'替换为所需的项目目录名称。

注意：我们建议使用Docksal的fin rc和fin exec命令，这些命令将在独立映射到当前目录的'cli'容器上执行命令。这确保了即使本地未安装Composer或NPM，这些命令也能运行。

--remove-vcs标志将删除batch/craft的git元数据，因此这将在项目存储库中使用。

运行安装程序

我们包含一个安装脚本，将完成项目设置

fin batch/install

执行此操作并按照提示后，您的项目应可在配置的域名下使用，并且您应看到一个确认的演示页面。

此命令使用mkcert设置SSL证书，运行Craft安装程序，安装Twigpack插件和npm依赖项，并对前端资源执行初始构建。如果您希望手动执行这些步骤，请参阅下面的说明。

手动安装

生成SSL证书。我们建议使用mkcert全局插件，可以使用以下命令安装：fin addon install --global mkcert

fin mkcert create

启动Docksal容器

fin up

通过CLI安装Craft

fin exec craft install

安装Twigpack插件

fin exec craft plugin/install twigpack

安装npm依赖项

fin exec npm install

构建资源文件

fin exec npm run build

就这些！您的新项目现在应在配置的域名下可用，并且您应看到一个确认的演示页面。

用法

Webpack / 构建工具

安装构建工具的依赖项

fin exec npm install

生产

fin exec npm run build

开发

在Docksal容器上运行开发管道。它将在webpack.{yourdomain}上可用

fin exec npm run dev

使用以下命令在开发期间特别生成遗留或组合浏览器构建

fin exec npm run dev-legacy
fin exec npm run dev-combined

构建配置

设置

在 webpack.settings.js 中的构建设置可以通过在项目根目录下放置一个 webpack.settings.js 文件来在项目级别进行覆盖。在构建过程中，这将与基础 webpack.settings.js 文件合并。

示例

module.exports = {
    paths: {
        src: {
            base: "./resources/",
            css: "./resources/css/",
            js: "./resources/js/"
        }
    }
};

Webpack 配置

可以通过在项目根目录中添加一个 webpack.config.js 文件来包含任何自定义的 Webpack 配置。在构建过程中，这将与最终的 Webpack 配置合并。

示例

const path = require("path");

module.exports = {
  resolve: {
    alias: {
      "#": path.resolve(__dirname, "src/vue/")
    }
  }
};

我们提供了一套默认设置，用于将 src/ 路径和额外的入口点进行别名映射。

Craft插件

使用 fin exec craft plugin/install 命令来安装任何额外的插件。

Twigpack 是必需的，并且默认已安装。我们还在 composer.json 依赖中包含了以下常见插件

Mailgun - fin exec craft plugin/install mailgun
Redactor - fin exec craft plugin/install redactor
SEOMatic - fin exec craft plugin/install seomatic
Freeform - fin exec craft plugin/install freeform
Navigation - fin exec craft plugin/install navigation

将内联脚本与Vue混合

有时我们发现需要在模板中运行纯 JS 代码（例如，与 Craft Commerce 一起使用），并且只在 Vue 应用挂载时运行此代码。

我们的解决方案是提供一个事件总线，它在文档的头部通过 critical.js 实例化，并在 window.app 中可用。要使用事件总线，只需像这样订阅和发布事件即可

示例：订阅事件

<script type="text/javascript">
  window.app.on("vue-mounted", () => {
    alert("vue has mounted!");
  });
</script>

示例：发布事件

mounted() {
  window.app.emit("vue-mounted");
}

提供 vue-mounted 事件，可以直接从 twig 模板中挂钩。

测试

前端

该启动器已安装并配置了 Jest，以及 Vue 测试框架辅助库。要运行测试套件，可以使用以下命令

fin exec npm run test.

路线图

查看 open issues 以获取提议的功能列表（以及已知问题）。

贡献

贡献使开源社区成为一个如此美妙的学习、灵感和创作的场所。您所做的任何贡献都将被 高度重视。

分支项目
创建您的功能分支（git checkout -b feature/AmazingFeature）
提交您的更改（git commit -m '添加一些 AmazingFeature'）
推送到分支（git push origin feature/AmazingFeature）
打开一个 Pull Request

许可证

在 MIT 许可证下分发。有关更多信息，请参阅 LICENSE。

联系方式

Jude Reid - @batchnz - jude@batch.nz
Alex Hatzipanis - @hatzipanis - alex@batch.nz

项目链接： https://github.com/batchnz/craft

致谢

感谢所有为此项目使用的工具背后的团队所做的辛勤工作。

batch / craft

维护者

详细信息