Laravel 프런트엔드 엔지니어링 믹스에 대한 자세한 설명

藏色散人

풀어 주다： 2021-04-14 09:09:59

앞으로

2020명이 탐색했습니다.

다음은 laravel 튜토리얼 칼럼에서 소개한 Laravel 프론트엔드 엔지니어링 믹스입니다. 필요한 친구들에게 도움이 되길 바랍니다!

laravel5.3 이전에는 프론트 엔드 엔지니어링이 gulp에 의존했습니다. 5.4에서는 laravel이 새로운 프론트 엔드 도구 믹스를 가져왔습니다.
이 섹션은 0부터 Seeing까지 기록합니다. 믹스 패키징이 완료되면 laravel은 helloworld를 렌더링합니다
이 섹션을 읽기 위한 전제 조건: laravel 및 vue 사용 경험이 있거나 프런트엔드 및 백엔드 엔지니어링에 대한 명확한 이해가 필요합니다

설치

1. laravel

composer create-project laravel/laravel learn-mix

로그인 후 복사

2 . 프론트엔드 종속성 설치

cd learn-mix ; npm install

로그인 후 복사

3. vue-router

npm install vue-router

로그인 후 복사

Configuration

라우팅 파일 생성

새 /resources/assets/js/routes.js를 생성하고 다음 내용을 작성하세요.

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require('./components/你的组件名字')
    }
];

export default new VueRouter({
    routes
});

로그인 후 복사

2. 경로 가져오기

/resources/assets/js/app.js

// 导入路由包
import VueRouter from 'vue-router';

// use
Vue.use(VueRouter);

// 导入路由文件
import routes from './routes.js';

const app = new Vue({
    el: '#app',
    // 使用路由
    router: routes
});

로그인 후 복사

3. 컴파일

루트 디렉터리로 돌아갑니다

npm run dev 
npm run watch 
# 任选其一

로그인 후 복사

4. laravel의 기본 / 경로

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <!--导入编译好的CSS-->
    <link rel="stylesheet" href="/css/app.css">
    <!--导入CSRF_TOKEN-->
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<p id="app">
    <router-view></router-view>
</p>
<!--导入编译好的JS-->
<script src="/js/app.js"></script>
</body>
</html>

로그인 후 복사

가 가리키는 환영 템플릿을 수정합니다.