【초보자향】Laravel 6계에서 Vue.js를 사용하는 방법
Laravel의 기초는 우선 통과했다
Vue.js의 기초는 우선 통과했다
하지만 Laravel에서 vue.js를 사용하는 방법을 모르겠습니다.
나 자신, 지금까지 실무 레벨에서 WEB 앱을 작성한 적이 있어, 곤란했기 때문에 공유합니다. .
이번 기사가 도움이 되었으면 좋겠습니다
덧붙여 실수나 지적 있으시면, 코멘트 주시면 다행입니다.
실행 환경
목표
절차
1) laravel/ui 패키지 설치
composer require laravel/ui:^1.0 --dev
2) vue.js의 파일 생성
php artisan ui vue
이 때, 루트 바로 아래의 "package.json"의 내용을 확인하고,
vue가 표기되어 있는지 확인합니다. 아래와 같이 되어 있으면, 문제 없을까 생각합니다.
package.json
{
"devDependencies": {
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
3) 의존 패키지 설치
npm install
4) js/sass 파일 컴파일 실행
npm run dev
컴파일 할 때, cross-env 주위의 에러가 나온 분은,
아래의 기사를 참고해 보세요.
해결책 ①: 패스 변경
laravel에서 npm run dev를 실행하면 "cross-env : not found"라는 오류가 발생하는 문제를 해결했습니다.
해결책 ② : mode_modules 디렉토리 다음을 삭제하고 npm 설치에서 다시 시도
npm 캐시 삭제 및 설치됨 삭제 및 재설치
그건 그렇고, 루트 바로 아래에있는 "webpack.mix.js"는 컴파일 타임에 필요한 파일입니다. 아래와 같이 컴파일 후 파일의 대상이 나열됩니다.
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/js/app.js는 컴파일되어 public/js 디렉토리에, resources/sass/app.scss는 컴파일되어 public/css 디렉토리에 출력되도록 설정되어 있습니다. 자세한 내용은 아래 사이트를 참조하십시오.
Laravel 6.x JavaScript 및 CSS 스캐폴드 "CSS 출력"
여기까지 하면, 이미 컴퍼넌트가 등록되어 있을까 생각합니다.
resources/js/app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
components 디렉토리 아래에 있는 ExampleComponent의 Vue 파일을 할당하고 있습니다. 덧붙여서 호출하는 ExampleComponent.vue 파일의 초기치는 이런 느낌이군요.
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
<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>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
5) 구성 요소 설명
그리고는, 호출처로, 컴퍼넌트의 기술을 하는 것 뿐입니다.
이번은, welcome 페이지에 표시해 보겠습니다. 아래의 설명으로 표시할 수 있습니다.
<example-component></example-component>
welcome 페이지에 묻으면 ... 이런 느낌 ↓
resources/views/welcome.blade.php
<!DOCTYPE html>
<head>
（省略）
</head>
<body>
（省略）
<div id="app">
<example-component></example-component>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
welcome 페이지에 구성 요소가 표시되었습니다!
이번 기사는 이상이 됩니다
도움이 되었다면 다행입니다! !
Reference
이 문제에 관하여(【초보자향】Laravel 6계에서 Vue.js를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/5chaiji_nao/items/b6ccd3f4561c699b1a3a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
