Laravel + Vue.간단하게 js를 실현하다

9451 단어 LaravelLaravel7.xLaravel-MixVue.js
laravel에서 Vuejs를 실현하는 데는 대략 3단계가 있다.
  • resources/js/components에서 vue 데이터를 만듭니다.
  • resources/js/app.js에 vue 구성 요소를 정의합니다.
  • app.js에서 정의한 vue 구성 요소는 리소스/views/*입니다.blade.php로 표시합니다.

    • ExampleComponent.vue를 표시해 보세요!
    app.js를 (으)로 설정합니다.
    resources/js/app.js
    
require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});
    기본 웰컴.blade.php에 기술하다.
    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ExampleComponent</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
    vue 파일을 작성하고 수정한 후 터미널에서 컴파일합니다.
    #コンパイル
npm run dev
#サーバーを立ち上げて確認
php artisan serve
    표시됨!

    Vue를 새로 만듭니다.
    1. vue 파일을 만듭니다.

    resources/js/components/LaravelVue.vue
    <template>
  <div>
    <h1>LaravelでVueを実装</h1>
    <p>Good!!</p>
  </div>
</template>
  • resources/js/app.js에 vue 구성 요소를 정의합니다.
    • resources/js/app.js
    require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('laravelvue', require('./components/LaravelVue.vue').default);

const app = new Vue({
    el: '#app',
});
  • app.js에서 정의한 vue 구성 요소는resources/views/welcome입니다.blade.php로 표시합니다.
    • 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>laravelvue</title>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    </head>
    <body>
        <div id="app">
            <laravelvue></laravelvue>
        </div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
    매번 번역npm run dev마다 귀찮아요.
    vue 파일 설명을 변경할 때마다 자동으로 컴파일됩니다 npm run watch에서 설명한 대로 해당 매개변수의 값을 수정합니다.
    #コンパイル
npm run watch
    command + T 에서 새 레이블이 서버를 시작합니다.
    #サーバーを立ち上げて確認
php artisan serve
    표시됨!

    vue 파일에 대한 설명을 다시 변경합니다.
    resources/js/components/LaravelVue.vue
    <template>
  <div>
    <h1>LaravelでVueを実装できた！！</h1>
    <p>Yeah!!</p>
  </div>
</template>
    npm run watch 감시, vue 파일의 설명이 변경되면 자동으로 컴파일됩니다.
    브라우저를 업데이트해 보세요!

    업데이트 중입니다.
    간단히 말하면, 있지만 조금만 참고하면 좋을 것 같아요.
    [JavaSciprt] 함수
    Java에서 무작위 수의 생성 방식과 원리 상세 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage