README

这是什么？

Fork自 craft-vue-tailwind 的composer项目模板，集成了

• Nanobox 用于开发环境
• git-flow 作为分支/发布策略
• CraftCMS 用于内容管理
• Fractal 作为活文档
• Tailwind 优先工具的CSS框架
• Purgecss 用于构建优化
• Jest 用于前端单元测试
• Vuejs 用于复杂的JavaScript功能
• Husky 用于git钩子
• Hygen 用于构建组件
• eslint & Prettier 用于代码检查和格式化

通过composer 和 vue-cli 的结合魔法，为您提供预配置的开发环境

包含内容：

• Webpack + vue-loader 用于单文件Vue组件
• 保留状态的热重载
• 文件编辑时页面重新加载（twig, html等）
• 保留状态的编译错误覆盖
• 使用ESLint的保存时检查
• 源映射
• 带资产同步的Fractal活文档
• 通过在包含名称前加@前缀在Craft中加载样式指南twig模板

需求

此模板需要在宿主机器上安装以下软件/包

• Nanobox（需要免费账户注册）
• PHP 7.3
• git和git-flow
• Composer
• Node.js
• Yarn
• vue-cli

在新的机器上安装？不是开发者？安装homebrew，然后一次性安装所有上述软件，除了Nanobox

brew install php composer node yarn git git-flow

注意：如果第一次安装Nanobox，请务必遵循macOS最新版本的安装后说明

如何使用：

创建新项目

# create & install project
composer create-project madebykind/craft-vue-tailwind <path>
cd <path>
# install deps and basic setup
./scripts/project/after-install
# customise the project
yarn project:configure
# apply environment settings
yarn project:apply-env
# install Craft in nanobox
nanobox run
# once you're inside the nanobox container
yarn project:setup-craft

# build fractal -> twig pathmap
yarn build:components

运行现有项目

git clone <project-git-url> <path>
cd <path>
# create .env
cp .env.example .env

# install deps and basic setup
./scripts/project/after-install
# install Craft
yarn project:setup-craft

访问CraftCMS数据库

默认情况下，Craft配置为使用项目配置，因此您通常不需要从站点导入/导出数据库，但是，如果您需要，可以通过运行

nanobox info local

然后，您可以使用显示在data.db下的凭据通过CLI或GUI以您喜欢的方式访问mysql

开发工作流程...

运行服务器

# run each of these in their own terminal pane
yarn serve
yarn test:watch
yarn serve:craft

创建新的前端组件

# Interactively skeleton a new component
yarn generate:component

命令

开发环境

• yarn serve：启动webpack开发服务器 + fractal服务器（注意：这不会启动craft/PHP服务器，因为您通常会希望它在另一个进程中运行）
• yarn serve:assets：启动上述webpack服务器，但不运行fractal
• yarn serve:fractal：启动fractal服务器
• yarn serve:craft：启动提供CraftCMS的nanobox容器

生成器

通过Hygen，在_templates/下的模板

• yarn generate:component：交互式生成新的前端组件

代码风格检查

• lint：如您所期望的那样
• lint:autofix：在可能的情况下自动进行代码风格检查和修复（在提交前和推送前自动运行）
• lint:config-check：检查eslint配置中与prettier冲突的规则

测试

• test:unit：运行单元测试（在推送前自动运行）
• test:watch：在代码更改时运行测试
• test:coverage：计算代码覆盖率统计

为生产环境构建

• yarn build：生产就绪构建。
  • 使用UglifyJS v3进行JavaScript压缩
  • Babel编译
  • 将所有组件的CSS提取到单个文件中，并使用cssnano进行压缩
  • 使用版本哈希编译静态资源，以实现高效的长久缓存
  • 使用Purgecss删除未使用的CSS。包括白名单以保持第三方库不受影响。
  • 包大小分析
  • 将生活样式指南构建为静态HTML

配置（可选）

要使用UI编辑vue-cli配置，您需要将Vue CLI 3全局安装在您的机器上。您可以运行vue ui并将项目导入以开始使用您选择的vue-cli插件自定义配置。

注意 默认情况下，项目使用随机分配的端口来运行webpack开发服务器和fractal服务器，这些端口由项目设置期间运行的project:configure命令设置，存储在package.json中的kindConfig键下，并通过project:apply-env命令加载到您的.env文件中。

为了使UI正常工作，vue-cli要求您在其默认端口（8080）上运行项目。因此，您需要临时将.env文件中的ASSET_SERVER_PORT更改为8080，并重新启动您的serve进程，然后完成配置后将其改回原始值。

内部原理

这些都是什么黑暗魔法？

此项目自动化了大量枯燥的手动任务。如果您想了解正在发生的事情，这里有一个简要的概述

1. 在composer创建项目后，它运行post-create-project-cmd脚本，该脚本

• 设置您的.env文件
• 将项目的composer.json替换为针对您的项目的特定版本
• 清理一些不需要的文件
• 导出composer的自动加载器

• 运行scripts/project/after-install，然后...

资产加载是如何工作的

注意：在开发过程中，仅您的资产将从localhost:<ASSET_SERVER_PORT>提供并引用在基本模板中。您仍然会从您正常开发域名（mysite.test等）下本地加载您的网站。这也将在由于JS/CSS资产从javascript加载到开发中而导致的页面加载时产生短暂的未样式闪屏。**在生产环境中构建后，此闪屏不会出现**。

在运行yarn build后，在本地测试构建文件的最简单方法是注释掉.env文件中的环境变量，并刷新页面。这将从构建目录提供您的资产，而不是从webpack开发服务器提供。

关于如何工作的详细解释，请参阅Vue CLI 文档。

Babel 编译

此模板使用babel-preset-env来配置babel。您可以在这里了解更多信息：

感谢

源自chasegiunta/craft-vue-tailwind