Laravel 과 전단 의 최고의 실천 기법 Laravel-Mix

Laravel Mix
laravel 은 전단 과 결합 하여 잘 만 들 었 습 니 다.Laravel Mix 를 제공 합 니 다.
Laravel Mix 는 간단 하고 가 독성 이 높 은 API 를 제공 합 니 다.일반적인 CSS 와 JavaScript 예비 프로 세 서 를 사용 하여 웹 팩 구축 절 차 를 정의 합 니 다.간단 한 체인 호출 을 통 해 자원 의 컴 파일 을 정의 할 수 있 습 니 다.
저 희 는 sass,npm,es6 문법,압축 을 사용 하여 무 작위 파일 이름 을 생 성 할 수 있 습 니 다.webpack 포장 을 통 해 html 에 주입 할 수 있 습 니 다.
간단 한 줄 코드,Laravel Mix 는 많은 중요 한 조작 을 수행 할 수 있 습 니 다.

ES 2017+모듈 편집

생 성 및 컴 파일  .vue  구성 요소  vue-loader )

모듈 열 교체

Tree-shaking 포장 기술,웹 팩 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 에서 사용 가능

Laravel 5.5 사전 설정 명령
Laravel 5.5 가 발표 되 었 습 니 다.preset 명령 이 새로 추가 되 었 습 니 다.

php artisan preset

이 줄 코드 는 주로 우리 가 전단 프레임 워 크 를 전환 하 는 데 편리 하 다.예 를 들 어 react,vue,bootstarp 등 이다.vue 를 사용 하고 싶다 면...

php artisan preset vue

vue 가 laravel 에서 구체 적 인 실례
머리 로 돌아 가 는 vue 구성 요 소 를 만 듭 니 다.
1.우 리 는 resources\js\components 에서 GoTop.vue 를 정의 합 니 다.

    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});
            }
        }
    }

2.resources\js\app.js 에 등록

Vue.component('go-top', require('./components/GoTop.vue'));

3.blade.php 모드 에서 사용 

```html

메모:vue 는 전역 구성 요 소 를 만 드 는 것 이 쉽 지 않 습 니 다.패키지 app.js 는 모든 페이지 에 불 러 오기 때 문 입 니 다.
달걀
한 구성 요소 에 다른 구성 요 소 를 도입 하면 콘 솔 에 오류 가 발생 할 수 있 습 니 다.[Vue warn]:Failed to mount component:template or render function not defined.(found in root instance)
원인 이 라면 이 글 을 구체 적 으로 참고 하 시 오
그럼 우리 가 laravel 에서 이런 문 제 를 만나면 어떻게 해결 해 야 합 니까?모든 구성 요 소 를 app.js 에 등록 하 는 것 입 니 다.