Laravel에서 vue를 배포하는 방법에 대한 자세한 설명-Laravel-php.cn

집

PHP 프레임워크

Laravel

Laravel에서 vue를 배포하는 방법에 대한 자세한 설명

藏色散人

Oct 28, 2021 pm 03:48 PM

laravelvue

Laravel+vue 환경 배포

이 튜토리얼에서는 Laravel의 vue 배포를 소개합니다. Laravel에는 Vue 라이브러리를 사용하여 최신 JavaScript 작성을 더 쉽게 시작할 수 있는 몇 가지 기본 스캐폴딩이 포함되어 있습니다. Vue는 구성 요소를 사용하여 강력한 JavaScript 애플리케이션을 구축하기 위한 표현형 API를 제공합니다. Laravel Mix를 사용하면 JavaScript 구성요소를 브라우저에서 바로 사용할 수 있는 JavaScript 파일로 쉽게 컴파일할 수 있습니다.

관련 권장 사항: 최근 5개의 Laravel 비디오 튜토리얼, 최신 5개의 vue.js 비디오 튜토리얼 선택

laravel 만들기

먼저 작곡가가 필요하고 그 다음에는 laravel이 필요합니다. 새로운 라라벨 프로젝트를 생성하기 위해 작곡가 create-project --prefer-dist laravel/laravel blog 명령을 실행하세요. (구체적으로 라라벨을 생성하는 방법을 배우려면 공식 웹사이트로 이동하세요)

Hello world!

명령줄을 열고 프로젝트 CD 블로그를 입력하세요

시작하기 전에, 아시다시피 다양한 이유로 인해 외부 노드 웨어하우스 설치 도구인 npm은 작동 중에 속도가 느려질 수 있습니다. 속도 저하 등의 다양한 문제가 있는 경우 일반적으로 가속을 위해 Taobao 소스를 사용하는 것이 좋습니다. 아래 코드에 접미사를 추가할 수도 있습니다. 다운로드한 프로젝트는 기본적으로 이에 의존합니다.

npm install  --registry=https://registry.npm.taobao.org

vue 라우팅 관리를 다운로드하세요. 코드는 다음과 같습니다.

npm install vue-router --save-dev

/resources/assets/js/comComponents에 새 HelloComponent.vue 사용자 정의 구성 요소 파일을 생성합니다. 코드는 다음과 같습니다.

<template>
    <div>
        <h1 id="Hello-nbsp-World">Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

/resources/assets/js 아래에 새 폴더 라우터를 생성하고 그 안에 hello.js를 생성한 후 중첩된 라우팅 구성을 통해 새로 생성된 HelloComponent 컴포넌트에 hello 경로를 매핑합니다.

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], resolve))
        },
    ]
})

현재 laravel 프로젝트의 /resources/assets/js 아래에 기본 인터페이스와 중첩된 라우팅 뷰로 새 hello.vue를 생성합니다.

<template>
    <div>
        <h1 id="Hello">Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

그런 다음 /resources/assets/js 아래에 hello.js를 생성하면 코드는 다음과 같습니다.

require(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    router,
    render: h=>h(App)
});

다음 코드를 사용하여 /resources/views 아래에 새로운 hello.blade.php를 생성하세요.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

/resources/routes/web.php에 새 경로를 추가하세요. 코드는 다음과 같습니다.

Route::view(&#39;/hello&#39;,&#39;/hello&#39;);

webpack.mix.js를 수정하면 코드는 다음과 같습니다.

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);

저장 후 명령줄의 프로젝트 디렉터리에서 npm run watch를 실행하여 다시 컴파일하세요.

명령줄의 프로젝트 디렉터리에 php artisan Serve를 입력하고 http://127.0.0.1:8000/hello를 방문하시면 됩니다. . 효과를 볼 수 있습니다

Laravel 5.5에는 Route::view 및 Route::redirect 메서드가 추가되었습니다. 5.4 이하의 경로는 다음과 같이 작성할 수 있습니다. Route::get('/hello', function () {return view( ' hello');});

Finally

때때로 npm을 실행할 때 Write EIO 오류가 표시되는데, 이는 인코딩 문제로 인해 발생할 수 있습니다. 이 경우 명령줄 파일을 관리자로 실행할 수 있습니다. , 또는 chcp 850 설정을 실행하세요. 활성 코드 페이지 번호, Laravel에서 Vue 배포에 대한 튜토리얼은 기본적으로 끝났습니다. Vue 구성 요소 작성에 대해 더 자세히 알아보려면 Vue 문서를 읽어보세요.

위 내용은 Laravel에서 vue를 배포하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 juejin에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

Laravel In Action : 실제 응용 프로그램 및 예제Apr 16, 2025 am 12:02 AM

laravelcanbeefectically-Worldapplicationsforlybuildingscaleberquentorm.2) laravel'secosystem, Enhancesdevelopment.3) eTaddressespesperformance를 포함하여

Laravel의 주요 기능 : 백엔드 개발Apr 15, 2025 am 12:14 AM

백엔드 개발에서 Laravel의 핵심 기능에는 라우팅 시스템, eloquentorm, 마이그레이션 기능, 캐시 시스템 및 큐 시스템이 포함됩니다. 1. 라우팅 시스템은 URL 매핑을 단순화하고 코드 구성 및 유지 보수를 향상시킵니다. 2. ELOQUENTORM은 객체 지향 데이터 작업을 제공하여 개발 효율성을 향상시킵니다. 3. 마이그레이션 함수는 버전 제어를 통해 데이터베이스 구조를 관리하여 일관성을 보장합니다. 4. 캐시 시스템은 데이터베이스 쿼리를 줄이고 응답 속도를 향상시킵니다. 5. 큐 시스템은 대규모 데이터를 효과적으로 처리하고, 사용자 요청을 차단하지 않으며, 전반적인 성능을 향상시킵니다.

Laravel의 백엔드 기능 : 데이터베이스, 논리 등Apr 14, 2025 am 12:04 AM

Laravel은 백엔드 개발에서 강력하게 수행되며 Eloquentorm, 컨트롤러 및 서비스 클래스를 통해 데이터베이스 작업을 단순화하고 대기열, 이벤트 및 기타 기능을 제공합니다. 1) Eloquentorm은 쿼리를 단순화하기 위해 모델을 통해 데이터베이스 테이블을 맵핑합니다. 2) 비즈니스 로직은 모듈성 및 유지 관리를 향상시키기 위해 컨트롤러 및 서비스 클래스에서 처리됩니다. 3) 큐 시스템과 같은 다른 기능은 복잡한 요구를 처리하는 데 도움이됩니다.

Laravel의 다양성 : 간단한 사이트에서 복잡한 시스템에 이르기까지Apr 13, 2025 am 12:13 AM

Laravel Development Project는 다양한 크기와 복잡성의 요구에 맞게 유연성과 힘으로 인해 선정되었습니다. Laravel은 간단한 블로그에서 복잡한 엔터프라이즈 수준 시스템에 이르기까지 라우팅 시스템, Eloquentorm, Artisan Command Line 및 기타 기능을 제공합니다.

Laravel (PHP) vs. Python : 개발 환경 및 생태계Apr 12, 2025 am 12:10 AM

개발 환경과 생태계에서 Laravel과 Python의 비교는 다음과 같습니다. 1. Laravel의 개발 환경은 간단하며 PHP와 작곡가 만 필요합니다. Laravelforge와 같은 풍부한 확장 패키지를 제공하지만 확장 패키지 유지 보수는시기 적절하지 않을 수 있습니다. 2. 파이썬의 개발 환경도 간단하며 파이썬과 PIP 만 필요합니다. 생태계는 거대하고 여러 분야를 다루지 만 버전 및 종속성 관리는 복잡 할 수 있습니다.

Laravel 및 백엔드 : 파워링 웹 응용 프로그램 논리Apr 11, 2025 am 11:29 AM

Laravel은 백엔드 논리에서 어떻게 중요한 역할을합니까? 라우팅 시스템, eloquentorm, 인증 및 승인, 이벤트 및 청취자, 성능 최적화를 통해 백엔드 개발을 단순화하고 향상시킵니다. 1. 라우팅 시스템은 URL 구조의 정의 및 요청 처리 로직을 정의 할 수 있습니다. 2. eloquentorm은 데이터베이스 상호 작용을 단순화합니다. 3. 인증 및 인증 시스템은 사용자 관리에 편리합니다. 4. 이벤트와 리스너는 느슨하게 결합 된 코드 구조를 구현합니다. 5. 성능 최적화는 캐싱 및 대기열을 통한 응용 프로그램 효율성을 향상시킵니다.

Laravel이 왜 그렇게 인기가 있습니까?Apr 02, 2025 pm 02:16 PM

Laravel의 인기에는 단순화 된 개발 프로세스, 쾌적한 개발 환경 및 풍부한 기능이 포함됩니다. 1) PHP의 유연성을 결합하여 Rubyonrails의 설계 철학을 흡수합니다. 2) 개발 효율성을 향상시키기 위해 Eloquentorm, Blade Template Engine 등과 같은 도구를 제공하십시오. 3) MVC 아키텍처 및 종속성 주입 메커니즘은 코드를보다 모듈화적이고 테스트 가능하게 만듭니다. 4) 캐싱 시스템 및 모범 사례와 같은 강력한 디버깅 도구 및 성능 최적화 방법을 제공합니다.

어느 것이 더 낫습니까, 장고 또는 라벨?Mar 28, 2025 am 10:41 AM

Django와 Laravel은 모두 풀 스택 프레임 워크입니다. Django는 Python 개발자 및 복잡한 비즈니스 논리에 적합한 반면 Laravel은 PHP 개발자 및 우아한 구문에 적합합니다. 1. Django는 파이썬을 기반으로하며 빠른 개발 및 높은 동시성에 적합한 "배터리 완성"철학을 따릅니다. 2. Laravel은 PHP를 기반으로하며 개발자 경험을 강조하며 중소형 프로젝트에 적합합니다.

See all articles