temich/bulma

Bulma CSS 框架的 Laravel Starter Kits

v1.0.0 2022-06-10 12:31 UTC

This package is not auto-updated.

Last update: 2024-09-27 20:00:41 UTC


README

Blade 文件使用 Bulma 框架作为新应用程序的起始点。替换现有视图文件。

安装

安装此包类似于安装任何其他 Laravel 包。

开始安装新的 Laravel 项目,完成 Starter Kit 安装。加载 Bulma 包,进行发布,并获取新的 blade 文件作为应用程序的起点。

1. 通过 Composer 安装

使用 Composer 获取包

composer require temich/bulma

注意: Laravel 使用包自动发现。因此,您可以跳过第 2 和第 3 步,直接跳到第 4 步。别忘了在 config/app.php 文件中将地区更改为 ru

如果您喜欢手动配置包,请直接进行到下一步,使用服务提供者和其他配置。

2. 定义服务提供者

打开文件 config/app.php 并定义新的服务提供者

'providers' => [
//  other providers

/*
* Package Service Providers...
*/
Temich\Bulma\BulmaServiceProvider::class,


//  other providers
];

该包包括本地化文件,如 ru.json 等。因此,这是一个设置地区的好时机

'locale' => 'ru',

您可以使用任何其他地区。

3. 更新 composer.json 文件

在应用程序根目录中打开 composer.json 文件,并添加以下内容

"autoload": {
    "psr-4": {
		"Temich\\Bulma\\": "vendor/temich/bulma/src"
    }
},

别忘了更新 Composer 的自动加载器

composer dump-autoload

4. 发布供应商资产

将供应商文件发布到当前应用程序。

为了替换标准文件的內容,建议清除 resources 文件夹并删除项目根目录中的 webpack.mix.js 文件。

或者,您可以使用 --force 选项来覆盖文件内容。

php artisan vendor:publish --provider="Temich\Bulma\BulmaServiceProvider" --force

5. 获取 Bulma

加载 Bulma CSS 框架并收集最终样式文件。

npm install bulma
npm run dev

注意: 在某些情况下,需要加载额外的依赖项,因此可能会出现错误。在这种情况下,需要再次执行 npm run dev

在浏览器中打开网站。

注意: 在浏览器中按下 Ctrl+F5,以清除缓存(更新 app.css 文件)。

使用

Blade 文件与控制器和路由中的说明相匹配。您可以自由地编辑、删除或添加新文件。此包已准备好使用。

EN Laravel Bulma: Starter Kits with css framework Bulma

Blade 文件使用 CSS 框架 Bulma 作为其他 Laravel 应用程序的起始包。通过替换标准视图文件来使用新的 Bulma-blade 文件。

安装

安装类似于每个其他 Laravel 包。

开始构建新的 Laravel 应用程序,完成 Starter Kit 设置。获取 Bulma 包,发布资产并获取新的 blade 文件。

1. 通过 Composer 安装

通过 Composer 获取包

composer require temich/bulma

注意: Laravel 使用包自动发现。因此,您可以跳过第 2 和第 3 步,直接跳到第 4 步。别忘了在 config/app.php 文件中将地区更改为 ru

如果您喜欢手动配置包,请直接进行到下一步,使用服务提供者和其他配置。

2. 定义服务提供者

打开文件 config/app.php 并定义新的服务提供者

'providers' => [
//  other providers

/*
* Package Service Providers...
*/
Temich\Bulma\BulmaServiceProvider::class,


//  other providers
];

该包包括本地化文件,如 ru.json 等。因此,这是一个设置地区的好时机

'locale' => 'ru',

您可以使用默认地区或您自己的地区。

3. 添加到 composer.json

在您的应用程序根目录中打开 composer.json 文件

"autoload": {
    "psr-4": {
		"Temich\\Bulma\\": "vendor/temich/bulma/src"
    }
},

更新自动加载器

composer dump-autoload

4. 发布供应商资产。

现在,是时候将供应商文件发布到当前应用中了。

要替换文件内容,您可以清空resources目录并删除文件webpack.mix.js。或者,您可以使用标志--force来重写文件内容。

php artisan vendor:publish --provider="Temich\Bulma\BulmaServiceProvider" --force

5. 获取Bulma

获取Bulma CSS框架并编译您的资源文件。

npm install bulma
npm run dev

注意:在某些情况下,我们需要下载更多的依赖并遇到错误。在这种情况下,请再次执行npm run dev

在浏览器中打开网站。

注意:在浏览器中按下Ctrl+F5按钮以清除网站URL的缓存。

用法

Blade文件对应于路由和控制台。您可以自由地编辑、删除或添加新文件。该软件包已准备好使用。