8 계열의 Vue.js 통합 전의 비망록
전제 지식
Laravel6.0 이후에는 자신의 Vue입니다.js,resources/js/app를 설치합니다.js를 편집해야 합니다.(이전에는 표준 탑재
설치→컴파일→VueComponent의 제작→app.js 연결 설정 →blade 쓰기 → 협업 확인
설치하다.
npm: 패키지 관리자
package.json에서 사용하는 가방의 이름과 버전에 대한 정보를 쓰고 설치할 수 있습니다.
나중에 낡은 물건을 갱신할 것 같아요.
루트 디렉토리
npm install
그러나 같은 환경을 만들 때 다음과 같은 시각이 필요하다
vuejs는 단독 구성 요소 컴파일링이 필요합니다
npm run dev
npm run hot
Vue 어셈블리 생성
resources/js 디렉터리 아래components 폴더 만들기
Vue 구성 요소를 생성합니다(다음 예).
resources/js/components/Sample.vue
<template>
<div>
<h1>Sample Component</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js 편집
지금까지
참조: https://www.larajapan.com/2019/10/14/app-jsbootstrap-js/
Vue.js 및 Vue 어셈블리(Sample.vue)를 사용하도록 정의합니다.
resources/js/app.js
import './bootstrap'
import Vue from 'vue'
import Sample from './components/Sample'
Vue.component('sample-component',require('./components/Sample.vue').default);
const app = new Vue({
el: '#app',
components: {
Sample
}
});
blade
예를 보면 빠르기 때문에welcome.blade.php 편집
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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
</head>
<body>
<div id="app">
<sample-component></sample-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
・・
・
분별
• 헤드에 메타 탭에 csrf 대책 코드 삽입
• div 태그를 Vue로 그리는 영역으로 설정
・laavelmix 컴파일된 대상 파일을 지정했습니다.
참조: https://www.ritolab.com/entry/171
トップページにSample.Vueの内容が表示されているか確認。
이렇게 하면 라벨과 뷰의 컬래버레이션을 확인할 수 있습니다.
Reference
이 문제에 관하여(8 계열의 Vue.js 통합 전의 비망록), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/snail_tanishi/articles/tutorial_laravel_vue_텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
