[입문] Laravel×Vue.js①~설정편~

13716 단어 PHPLaravelJavaScriptVue.js

입문


PHP 프레임워크 Laravel에서 만든 응용 프로그램
JavaScript 프레임 Vue다음은 어떻게 js를 협업하게 하는지 소개합니다.

Node.설치 js


Node.js의 패키지 관리 도구를 사용하기 때문에npm
Vue.js를 이용하기 위해, Node.js가 필요합니다.
우선 https://nodejs.org/ja/부터 설치하세요.
추천판과 최신판 모두 가능합니다. 설치하십시오.

Vue.응용 프로그램에 js 설치


설치할 패키지 리스트package.json를 변경한 후npm Vue를 사용합니다.js를 설치하고 구축합니다.

package.json 변경


package.json은 설치할 패키지를 목록으로 설명합니다.
Vue.js와 관련된 가방은 vue, vue-template-compiler 입니다.
package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tar": "^4.4.8",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "node-sass": "^4.12.0",
        "quill": "^1.3.6"
    }
}

Vue.설치 js


위에 있는 패키지를 설치하세요.
단말
$ npm install

Vue.구축 js


Vue만 설치되어 있습니다.js를 사용할 수 없기 때문에 구축합시다
단말
$ npm run dev

구성 요소 등록


생성된 구성 요소
resources/app.js
require('./bootstrap');

window.Vue = require('vue');

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

const app = new Vue({
    el: '#app'
});

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
상술한 설명에서resources/js/components/ExampleComponent.vue의 이름으로 등록

구축


Vue.js 관련 파일을 변경할 때, 구축하지 않으면 변경 사항을 반영하지 않습니다.
단말
$ npm run dev

구성 요소


샘플 구성 요소 확인
없으면 수동으로 만들기
resources/js/components/ExampleComponent.vue
<template>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Example Component</div>
                <div class="card_body">
                    I'm an example component.
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mouted() {
            console.log('Component moundted.')
        }
    }
</script>
내용과 관계가 없기 때문에 이번에는 설명을 생략한다.
간단하니까 시간 있을 때 한 번 보세요.

뷰 파일에서 템플릿 찾아보기


보기 파일에서 구성 요소를 참조하는 방법을 알아보십시오.
적당한 파일에 삽입하여 보십시오
resources/views/****.blade.php
<head>
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" type="text/css">
    <meta name="csrf-token" content="{{csrf_token()}}">
</head>
<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('/js/app.js')  }}"></script>

스타일 시트

<link href="{{ mix('/css/app.css')  }}" rel="stylesheet" type="text/css">
example-component 태그에서 스타일시트 참조
그러나 스타일시트는 link 및 resources/css 중 두 개입니다.
따라서 public/css 에서 총 두 스타일시트를 가져올 수 있습니다.
　

CSRF 토큰

<meta name="csrf-token" content="{{csrf_token()}}">
Laravel에서 Vue입니다.js를 사용할 때 CSRF 토큰을 사용하는 것이 좋습니다.
특별한 이유가 없다면 적어 두시오

구성 요소 찾아보기

<div id="app">
    <example-component></example-component>
</div>
구성 요소는 mix('/css/app.css") 영역에 사용할 수 있습니다.id="app" 탭에 생성된 구성 요소를 호출합니다.

스크립트 파일

<script src="{{ mix('/js/app.js')  }}"></script>
스타일시트와 마찬가지로 example-component 에서 총 두 개의 스크립트 파일을 가져옵니다.
반드시 mix('/css/app.css") 아래에 기술하십시오.

동작 확인


마지막으로 동작을 확인해 볼게요.
잊지 마라, 우리가 그것을 세울 것이다
단말
$ npm run dev
상술한 내용을 보여줄 수 있다면 완성!!
궁금한 점, 궁금한 점 있으시면 질문, 댓글!!!
Seis maiores erros de acessibilidade 디지털 회사
서버 없는 과정 - 제2과: AWS 인증 구축 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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