웹 앱 개발을 위해 널리 사용되는 도구는 vuejs이며, 이 기사에서는 이를 Laravel과 함께 설치하고 사용하는 방법에 대해 알아봅니다. Vue.js 프레임워크는 defi니토 진보적 틀 HTML 보기 생성에 특화되어 있고 다른 라이브러리 및 프로젝트의 구성 요소와 쉽게 통합할 수 있기 때문입니다.
Vue.js의 성공은 또한 Laravel 이를 프론트엔드 프레임워크로 제안하여 버전 2.0의 출시로 이어졌습니다.
물론 첫 번째 단계는 Laravel에서 새 프로젝트를 만드는 것입니다. 컴퓨터에 있는 경우 이를 사용하거나 이 자습서용으로만 새 것을 만들 수 있습니다.
composer create-project laravel/laravel guide-laravel-vue프로젝트가 시작된 후 다음을 설치해야 합니다. npm 중독. 이렇게 하려면 프로젝트 디렉터리 내에서 다음 명령을 실행합니다.
npm install종속성이 설치되면 다음 명령을 실행하여 리소스를 빌드하고 모든 것이 실제로 작동하는지 확인합니다.
npm run dev명령 npm run dev 특히 다양한 검사 및 빌드를 수행합니다. Laravel Mix 파일을 컴파일 resources/js/app.js 그리고 파일 resources/css/app.css 파일에서 public/js/app.js e public/css/app.css.
완료되면 모든 것이 제대로 작동하면 다음과 같이 표시됩니다.
Laravel 프로젝트를 준비한 후 Vue.js 3 설치를 진행할 수 있습니다. 이렇게 하려면 프로젝트 디렉토리에서 다음 명령을 실행합니다.
npm install --save-dev vue이렇게 하면 Vue.js가 개발 종속성 중 하나로 설치됩니다. 자산을 컴파일한 후 프로덕션 JavaScript 파일은 자체 포함되므로 Vue.js를 개발 종속성으로 설치하기만 하면 됩니다.
Vue 3가 올바르게 설치되었는지 확인하려면 파일을 엽니다. package.json (프로젝트 루트에 있음) 및 검색 "vue" 섹션에서 "devDependencies":
// package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue": "^3.2.37"
}
}보시다시피 버전 번호는 Vue.js 3이 설치되었음을 나타냅니다.
welcome.blade.php 파일에 다음 코드를 입력합니다.
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>보시다시피 우리는 요소를 만들었습니다 div 와 id "vue-app". 스크립트 요소 내부에 Vue 인스턴스를 생성했습니다. 여기에서 생성자에게 다음을 허용하는 객체를 전달합니다. defi우리의 경우 데이터 및 동작과 같은 일부 응용 프로그램 매개 변수를 완료합니다.
div defihtml에서 완료객체가 생성되자마자 Vue 획득 div 와 id vue-app 자리 표시 자 교체를 처리합니다. {{ text }} 데이터 개체 내에 포함된 값으로. 물론 이 개체는 유형이 다르더라도 둘 이상의 속성을 포함할 수 있습니다. 숫자, 배열 및 기타 중첩된 개체는 유효합니다.
이 교체 외에도 Vue는 엔진을 활성화하고 애플리케이션을 반응형으로 만들었습니다. 즉, text 속성을 변경하면 HTML에서 해당 요소가 즉시 업데이트됩니다.
두 번째 평가판을 진행하려면 먼저 앱을 인스턴스화하여 새 구성 요소를 만들어야 합니다. 당신은 엽니 다 resources/app.js (o resources/js/app.js) 다음과 같이 내용을 업데이트합니다.
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');이 파일에서 우리는 새로운 Vue.js 인스턴스를 생성하고 있으며 이를 수행하려면 HelloVue.vue라는 Vue 구성 요소가 필요합니다. 자세한 내용은 공식 문서를 참조하십시오 .
새 파일 만들기 resources/components/HelloVue.vue 다음 코드를 입력합니다.
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>방금 생성한 파일은 인쇄하는 기본 Vue.js 구성 요소입니다. Hello Vue! 왔다 header1 페이지에서. 마지막으로 webpack.mix.js 파일을 프로젝트 루트에 저장하고 다음과 같이 내용을 업데이트합니다.
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue({
version: 3,
})
.postCss('resources/css/app.css', 'public/css', [
//
]);이 파일에서 메서드 호출 .vue() 모든 Vue.js 코드를 컴파일하고 프로덕션 JavaScript 파일에 번들합니다. 이 함수는 다음과 같은 객체를 허용합니다. defi사용 중인 Vue.js 버전을 완료합니다.
파일 수정 후 webpack.mix.js 자바스크립트 코드를 컴파일해야 합니다. 이를 위해 명령을 다시 실행합니다. npm run dev.
마지막으로 Vue를 운영적으로 시도하려면 파일을 엽니다. 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.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Vue</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<hello-vue />
</div>
</body>
</html>코드는 이전에 생성된 구성 요소와 함께 비디오 메시지를 생성합니다. 안녕 뷰!, Vue.js 인스턴스가 HTML 요소에 마운트되기 때문에 id app.
다음을 사용하여 애플리케이션 실행 php artisan serve, 즐겨찾는 브라우저에서 엽니다.
Ercole Palmeri
관심이있을 수도 있습니다 ...
색칠을 통해 소근육 운동 능력을 키우면 아이들이 글쓰기와 같은 보다 복잡한 기술을 준비할 수 있습니다. 색칠하다…
지난 월요일, Financial Times는 OpenAI와의 계약을 발표했습니다. FT는 세계적 수준의 저널리즘에 라이선스를 부여합니다…
수백만 명의 사람들이 스트리밍 서비스 비용을 지불하고 월간 구독료를 지불합니다. 당신은…