前端包管理、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方法