快速搭建前端

前言

利用前端框架能快速搭建出所需要的页面。这样就不用费心思去设计了，节省了开发时间和成本。
常用的前端框架有BootStrap（国外，在国内应用比较广泛），AmazeUI（国产），WeUi（微信开发专用框架）。大家可适当选择自己喜欢的框架。
这里我们使用的是WeUI。演示一下调用WeUI中的ActionSheet组件
注：这里你有可能会尝试成功，但是好多原理你不一定会。建议先去laravel学院学点基础教程，和去慕课学点前端基础。

使用Git下载框架

1. 在Git Cmd中输入 cd Desktop
2. 在Git Cmd中输入 git clone https://github.com/weui/weui
3. 稍等一会就将weui的源码下载到桌面上了。
4. 然后将这个文件夹放至laravel的public下

Paste_Image.png

快速使用前端框架

准备工作

1. 在 public目录下新建css，js ，images，fonts文件夹用以存放相应的文件。
2. 将weui中的css文件放至你自己创建的css文件夹下
3. 在js文件夹下存放jQuery v1.11.2文件，网上文件很多，这里大家可自行查找
4. 在resources\view文件夹下新建component文件夹
5. 在view文件夹下新建master.blade.php，login.blade.php两个文件
6. 在component文件夹下新建actionsheet.blade.php文件

编写模板文件

• master.blade.php 源码
  ``` `

@yield('my-js')
```

- login.blade.php源码

```@extends('master')
@section('title','登录')
@section('content')
    @include('component.actionsheet')
@endsection
@section('my-js')
    
@endsection```

- actionsheet.blade.php源码
```

    
`
        iOS ActionSheet
    
  `  `
`    
`
        

        

            

                
示例菜单
                
示例菜单
                
示例菜单
                
示例菜单
            
            

                
取消
            
        
    
  `  `
```

- 最后在把app/Http/routes.php的代码改为

`Route::get('/', function () {`
  `  return view('login');`
    
`});`
- 差不多就是这样了，下面是效果图

![效果图.png](http://upload-images.jianshu.io/upload_images/3246153-3be7ea424159f74e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)