Laravel Mix
laravel在與前端相結合這塊做的很不錯,提供了Laravel Mix
Laravel Mix 提供了簡潔且可讀性高的 API ,用於使用幾個常見的 CSS 和 JavaScript 預處理器爲應用定義 Webpack 構建步驟。可以通過簡單鏈式調用來定義資源的編譯。
我們可以自己使用sass,npm,es6語法,壓縮,生成隨機文件名,通過webpack打包生成 注入到我們的html中
簡單的一行代碼,Laravel Mix 可以執行很多重要的操作。
- ES2017 + 模塊編輯
- 創建並且編譯
.vue
組件 (通過vue-loader
) - 模塊熱替換
- Tree-shaking 打包技術, webpack 2 裏新增的 (移除未使用的庫代碼)
- 提取和拆分 vendor 庫 (通過
mix.extract()
), 讓長期緩存變的容易 - 自動版本化 (文件哈希),通過
mix.version()
可查看本人項目源碼:https://github.com/WXiangQian/laravel-api
具體使用例子
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>
2.在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註冊。