README

此入门套件用于symfony项目。它包含了入门套件

额外功能

• 样式指南
• 处理静态集成路由

先决条件

• 使用Symfony 4
• 使用NVM在机器上安装node和yarn

安装

在项目根目录下运行以下命令

composer require umanit/front-bundle

安装包后，需要删除由webpack-encore-bundle的flex配方添加的package.json和webpack.config.js文件。

然后，运行以下命令

php bin/console umanit:front-bundle:init

完成后，需要安装front依赖

nvm exec yarn install

注册路由

# app/config/routes/dev/umanit_front_bundle.yaml
umanit_front_bundle:
    resource: "@UmanitFrontBundle/Resources/config/routes/dev/routes.yaml"

样式指南的文件夹和文件

在projet/templates中，创建style_guide文件夹，然后按照以下结构组织

style_guide
    |_ index.html.twig
    |_ modules
        |_ buttons.html.twig

index.html.twig

{% extends '@UmanitFront/style_guide/base.html.twig' %}

{% block title %}{% endblock %}

{% block body %}
    <table>
        {% include '@UmanitFront/style_guide/partials/progress.html.twig' with {
             template: 'block',
             title: 'Block',
             tags: ['layout'],
             description: 'Block description',
             progress: 30
         } %}
    </table>
{% endblock %}

根据添加到文件夹中的元素数量重复{% include %}

静态集成路由

路由/static/{path}允许以静态方式显示集成Twigs。变量{path}对应于templates/static/中模板Twigs的路径，无论其在目录树中的深度如何。

• https://domain.wip/static/nom-du-twig.html将渲染templates/static/nom-du-twig.html.twig的Twigs视图
• https://domain.wip/static/sous-dossier/ma_vue.html将渲染templates/static/sous-dossier/ma_vue.html.twig的Twigs视图

使用

对于CSS部分，使用方法与front kit相同。