Laravel 8에서 Vue 설정하기

8604 단어 vuelaravelphpjavascript
laravel에서 SPA를 원하십니까? 예, 우리 모두 그렇습니다! 그래서 Vue.js가 laravel 8에서 생기를 불어넣는 빠르고 쉬운 방법이 있습니다.

먼저 라라벨이 설치되어 있고 새로운 프로젝트가 준비되어 있다고 가정하겠습니다. 아직 https://laravel.com/docs/8.x/installation으로 이동하지 않은 경우 해당 가이드를 따라 새 프로젝트를 설정하세요.

라라벨 설정



좋습니다. 먼저 web.php 경로 파일을 변경하고 route/wep.php로 이동한 다음 내용을 다음으로 바꿉니다.

Route::get('/{any}', 'App\Http\Controllers\PagesController@index')->where('any', '.*');


여기서 우리가 말하는 것은 URL에서/뒤에 오는 모든 것에 만족한다는 것입니다.

다음으로 터미널을 열고 PagesController를 만듭니다.

PHP artisan make:controller PagesController


그것이 app/http/controllers 폴더로 실행되면 위쪽과 두 개의 중괄호 사이에 다음을 추가합니다.

//
    public function index()
    {
        return view('welcome');
    }


이것은 우리의 resources/views 폴더에 있는 환영 보기를 반환할 것이므로 그곳으로 가서 보기 좋게 만들어 봅시다. 먼저 Welcome.blade.php의 모든 항목을 삭제하고 다음을 붙여넣습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap" rel="stylesheet">
    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
    </script>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}" />

    <title>{{env('APP_NAME')}}</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>


그러면 앱이 설정되고 vue.js 구성 요소를 삽입할 수 있는 좋은 위치가 제공됩니다.

이제 Vue 시간입니다!



터미널 실행에서

npm install
npm install vue
npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps


이제 우리는 vue.js와 모든 영광을 resources/js 폴더에 설치하고 views라는 폴더를 만들고 거기에 app.vue라는 새 vue.js 파일을 만들고 다음 코드를 추가합니다.

<template>
  <div>
    {{message}}
  </div>
</template>
<script>
const default_layout = "default";


export default {
  computed: {},
  data() {
      return {
          message:'Hello World'
      }
  }
};
</script>


이것이 우리의 진입점인 vue.js 구성 요소이며 vue.js에 이를 로드하도록 지시하기만 하면 완료됩니다.

따라서 js 폴더의 app.js로 이동하고 거기에 있는 코드를 다음으로 교체합니다.

import Vue from 'vue'

//Main pages
import App from './views/app.vue'


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


여기서 우리가 하는 일은 노드 모듈 폴더에서 vue.js를 가져오고 방금 만든 구성 요소를 가져오고 새 vue.js 인스턴스를 만들고 Welcome.blade.php 파일에 추가한 앱의 ID에 마운트하는 것입니다.

이제 webpack.mix.js 파일을 업데이트해야 합니다.

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);


당신이 실행하는 경우

npm run dev
PHP artisan serve


터미널에서 발사하여 멋진 Hello World를 얻을 수 있으며 모든 준비가 완료되었습니다!

이와 관련된 문제가 있거나 질문하고 싶은 사항이 있으면 아래에 의견을 남겨주세요.

그 과정을 영상으로도 찍어봤어요! 예, 문서를 업데이트한 후 업데이트해야 했지만 내 프로세스를 볼 수 있습니다.

Java에서 PowerPoint 프레젠테이션에 차트를 삽입하는 방법
답변: Mongose -\uid 목록을 가져오는 것이지\uid가 있는 대상 그룹을 가져오는 것이 아닙니다. 대답: Mongose -\uid 목록을 가져오는 것이지\uid가 있는 대상 그룹을 가져오는 것이 아닙니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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