前端包管理、sass、局部视图

1.包管理

代替npm的yarn工具：在主机上安装好yarn后，在对独立项目使用yarn以前，须要在项目根目录yarn install，生成一个node_modules文件夹存放包文件，一个yarn.lock文档记录包列表、版本，laravel中，yarn默认安装

*gulp - 基于 Node.js 实现 Web 前端自动化任务管理工具；如编译sass文件成css文件（此处会将resources/assets/sass/app.scss编译到public/css里）

*laravel-elixir - 由 Laravel 官方提供的静态资源管理工具；

*bootstrap-sass - Bootstrap NPM 扩展包；

2.sass

（1）样式文件导入

 

Sass 使用 @import 来导入其它的样式文件。如：

 

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

上面代码将导入存放在 node_modules/bootstrap-sass/assets/stylesheets/bootstrap 文件夹中的全部样式文件。

（2）变量

 

Sass 还容许你在代码中加入变量，全部的变量均以 $ 开头。

 

$navbar-color: #3c3e42;

.navbar-inverse {

  background-color: $navbar-color;

}

上面代码定义了一个 $navbar-color 颜色变量，在编译成功以后，变量将被替代为它所对应的值。

（3）嵌套

 

Sass 还容许你在选择器中进行相互嵌套，以减小代码量。

（4）引用父选择器#

 

你还能够在 Sass 嵌套中使用 & 对父选择器进行引用：

a {

  color: white;

  &:hover {

    color: blue;

  }

}

2.局部视图

与blade默认主视图主要区别有二：

（1）命名时开头加下划线

（2）在子视图引用时，@include(.)。默认视图用@extend

3.链接复用、路由命名

使用下面这种方式来渲染 help 连接，则须要先为路由定义 help 路由名称。

 

<li><a href="{{ route('help') }}">帮助</a></li>

在 Laravel 中，咱们能够经过在路由后面链式调用 name 方法来为路由指定名称：

 

Route::get('/help', 'StaticPagesController@help')->name('help');

不一样名路由不能指向同一url，不然报错。

修改url（如此处的’help’），视图的调用仍然取决于控制器Static的help方法