README

构建说明

1. composer create-project roy-veldman/wirecraft [项目名称]
2. cd 进入项目
3. 创建数据库
   • mysql -u [username]（如有密码，请添加 -p）
   • 创建数据库 [数据库名];
4. 运行 ./craft setup/index
5. 运行 composer update
6. 运行 npm install
7. 运行 npm run dev
8. 登录后端
   • 设置主页
   • 转到设置 -> 插件，并安装插件
   • 在上传文件夹中创建资产 @web/assets/uploads/{images}

• 为 craft 中设置的所有图片和文件创建了一个上传文件夹，这个文件夹不会进行推送，因此您不会与本地和生产环境冲突。硬编码或静态的静态图像在图像或图标文件夹中，这些可以推送。

生产构建

如果已准备好进行生产，请运行 npm run build，这将压缩 JavaScript 和 CSS 文件。

启动说明

如果您在 craft 的后端创建了一个主页，无论是单页还是结构，都可以从下面的代码开始。

• 文件名示例 pages/_entry.twig

{% extends 'layouts/_master' %}

{% block content %}

      {# content comes here #} 

{% endblock %}

附加信息

VueJS

• VueJs 已经是样板的一部分，如果您想使用它，请按照以下步骤操作
• 在 app.js 中

import Vue from 'vue'

new Vue({
    el: [targetElement]
});

• 在 JS 文件夹中
  • 创建组件文件夹
  • 创建 .vue 文件
• 在 .vue 文件中，您也可以从 scss 文件访问全局变量，如果您想添加或更改这些，请进入 webpack.common.js 并配置 configureCssLoader()

Jquery

• 如果您想在项目中使用 Jquery（我不推荐），请按照以下步骤操作
• 所有这些更改都在 webpack.common.js 中

// At the top of the file add the webpack variable
const webpack = require('webpack'); 

// Inside the plugins add the following plugin, 
// Add this below the CopyWebpackPlugin
new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
})

样板信息

• Craft CMS（清洁安装）
• 基本文件夹结构
  • Src 文件夹包含 JS 和 SCSS
  • 启动文件（ app.scss / app.js ）
  • 标准移动混合（已在 app.scss 中包含）
  • 布局文件夹包含 _master.twig 文件，其中包含基本布局文件（包括 css、js 包和 SEO 插件）
• Craft 模块
  • 缓存破坏（为 css 和 js 文件添加版本号）
• Craft 插件
  • 条目说明
  • 超级表格
  • SEO
  • Redactor
• Webpack（用于编译 css 和 js）
  • ES6 功能
  • SCSS
  • VueJS
  • 文件加载器
  • Babel
  • 复制静态资产（标准字体和图标）
  • 在生产中压缩 CSS 和 JS（包括前缀！）
  • 带有热重载的实时服务器
  • 清洁文件插件（从资产文件夹中删除未使用的 css 和 js 文件）

由 Roy Veldman 编写