Laravel与前端最佳实践

Laravel Mix

laravel在与前端相结合这块做的很不错,提供了Laravel Mix

Laravel Mix 提供了简洁且可读性高的 API ,用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤。可以通过简单链式调用来定义资源的编译。

我们可以自己使用sass,npm,es6语法,压缩,生成随机文件名,通过webpack打包生成 注入到我们的html中

具体使用例子

webpack.mix.js中

mix.js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/geetest.js','public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/index.scss', 'public/css')
    .sass('resources/assets/sass/post.scss', 'public/css')
    .sass('resources/assets/sass/search.scss', 'public/css')
    .version();

blade.php 中就可以使用

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

Laravel 5.5 preset命令

Laravel 5.5发布,新增加了一个preset的命令。

php artisan preset

这行代码主要就是方便我们切换前端框架,比如react,vue,bootstarp时。如果想使用vue就可以

php artisan preset vue

vue在laravel中具体实例

下面做个返回头部的vue的组件

  1. 我们在resources\js\components定义GoTop.vue
<template>
  <transition name="fade">
    <div class="goTop" @click="goTop" v-if="isShow">
        <span class="glyphicon glyphicon-menu-up"></span>
    </div>
  </transition>
</template>

<script>
    export default {
        data() {
            return {
                isShow : false,
            }
        },
        mounted() {
            let that = this;
            $(window).scroll(function(){
                if( $(this).scrollTop() > 50 ){
                    that.isShow = true;
                } else {
                    that.isShow = false;
                }
            });
        },
        methods: {
            goTop() {
                $('html,body').animate({scrollTop:0});
            }
        }
    }
</script>
<style scoped lang="scss">
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .goTop {
    position: fixed;
    right: 36px;
    bottom: 50px;
    background: #FFF;
    width: 50px;
    height: 50px;
    line-height: 60px;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 4px 12px 0 rgba(7,17,27,.1);
    cursor: pointer;
    z-index: 1000;
    span {
      font-size: 20px;
    }
  }
</style>
  1. 在resources\js\app.js注册
    
    Vue.component('go-top', require('./components/GoTop.vue'));

3. 在blade.php 模版中使用
```html
<go-top></go-top>

注意: vue做全局组件不易太多,因为打包app.js会被所有页面都会加载到。

vue 彩蛋

如果一个组件里引入另组件可能你的控制台就会报一个错误,[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

原因的话,具体参考这篇文章

那如果我们在laravel中遇到这种问题该怎么解决呢?,就是把所有组件都在app.js注册。

这个章节的代码,请参考最后一章基于laravel做的一个简单版的项目。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
cxp1539
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~