laravel实践2.引入bootstrap

1.安装bootstrap

composer require laravel/ui --dev

 2.引入bootstrap

php artisan ui bootstrap

3.Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的. 在package.json中可发现:

  • bootstrap —— Bootstrap NPM 扩展包;
  • jquery —— jQuery NPM 扩展包;
  • laravel-mix —— 由 Laravel 官方提供的静态资源管理工具。

这些扩展包,为 Laravel 提供了一套完整的前端工作流。

4.可以使用 NPM 对这些扩展包进行安装。

先使用国内镜像加速:

$ npm config set registry=https://registry.npm.taobao.org
$ yarn config set registry 'https://registry.npm.taobao.org'

5.使用 Yarn 对扩展包进行安装,请在项目根目录下运行以下命令进行安装:

$ yarn install --no-bin-links
$ yarn add cross-env

6.编辑resources/sass/app.scss

@import '~bootstrap/scss/bootstrap';

7.将 Bootstrap 导入成功之后,需要使用以下命令来将 .scss 文件编译为 .css 才能正常使用

npm run dev

或使用以下命令实时监测.scss变化并及时编译为.css

 npm run watch-poll

(在进行项目开发时 npm run watch-poll 必须一直运行着,避免出现前端文件更改后没有应用到页面上)。

所有编译后的资源文件都被存放在 public 文件夹中,在 public/css 文件夹中看到刚刚编译成功之后的文件。

8.在所需视图页面的<head>中引入:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

猜你喜欢

转载自www.cnblogs.com/itwatcher/p/12106421.html