laravel에는 vue가 내장되어 있습니까?
- WBOY원래의
- 2022-09-01 17:09:381940검색
Laravel에는 vue가 내장되어 있지 않습니다. laravel은 PHP 언어로 작성된 웹 프로그램 개발 프레임워크이고, vue는 사용자 인터페이스를 만드는 데 사용되는 오픈 소스 JavaScript 프레임워크입니다. laravel의 vue에서.
이 기사의 운영 환경: Windows 10 시스템, Laravel 버전 9, Dell G3 컴퓨터.
laravel에는 vue가 내장되어 있나요?
Laravel은 개발자에게 공통 구성 요소를 제공하고 웹 프로그램 개발을 단순화하는 것을 목표로 합니다. 코드를 적게 작성하면 다른 프로그래밍 언어나 프레임워크로는 달성하기 어려운 기능을 얻을 수 있습니다. 숙련된 PHP 프로그래머는 Laravel이 프로그램 개발을 더욱 재미있게 만든다는 것을 알게 될 것입니다.
vue는 사용자 인터페이스를 생성하기 위한 오픈 소스 JavaScript 프레임워크이자 단일 페이지 애플리케이션을 생성하기 위한 웹 애플리케이션 프레임워크입니다. Vue의 핵심은 MVC 패턴의 뷰 레이어에 있으며 동시에 데이터도 쉽게 얻을 수 있습니다. 업데이트하고 컴포넌트 내부의 특정 메소드를 통해 뷰와 모델 간의 상호 작용을 실현합니다.
Laravel
Laravel은 간결한 구문을 갖춘 표현력이 풍부한 웹 애플리케이션 프레임워크입니다. 우리는 개발 과정이 즐겁고 창의적인 경험이어야 한다고 믿습니다. 라라벨은 개발 과정에서 발생하는 불편함을 줄이기 위해 노력하고 있으며, 인증, 라우팅, 세션, 캐싱 등 개발 과정에서 자주 사용되는 도구나 기능을 제공하고 있습니다.
Laravel의 목표는 애플리케이션 기능을 희생하지 않고 개발자를 위한 즐거운 개발 프로세스를 만드는 것입니다. 행복한 개발자는 최고의 코드를 만듭니다. 이를 위해 우리는 다양한 프레임워크의 장점을 활용하여 이를 Laravel에 집중시켰습니다. 이러한 프레임워크에는 Ruby on Rails, ASP.NET MVC 및 Sinatra가 포함되지만 이에 국한되지는 않습니다.
vue
Vue.js(/vjuː/ 또는 간단히 Vue)는 사용자 인터페이스 생성을 위한 오픈 소스 JavaScript 프레임워크와 단일 페이지 애플리케이션 생성을 위한 웹 애플리케이션 프레임워크입니다. 2016년 JavaScript 설문조사에 따르면 Vue는 개발자 만족도가 89%인 것으로 나타났습니다. GitHub에서 이 프로젝트는 하루 평균 95개의 별을 받아 Github 역사상 세 번째로 많은 별을 받은 프로젝트가 되었습니다.
Vue.js는 웹 개발을 더 잘 구성하고 단순화하도록 설계된 인기 있는 JavaScript 프런트 엔드 프레임워크입니다. Vue의 핵심 초점은 MVC 패턴의 뷰 레이어입니다. 동시에 데이터 업데이트를 쉽게 얻고 구성 요소 내의 특정 메서드를 통해 뷰와 모델 간의 상호 작용을 실현할 수도 있습니다.
Laravel에서 vue를 배포하는 방법
Laravel 만들기
먼저 Composer가 필요하고 그 다음에는 Laravel이 있습니다. 새로운 라라벨 프로젝트를 생성하기 위해 작곡가 create-project --prefer-dist laravel/laravel blog 명령을 실행하세요. (구체적으로 라라벨을 생성하는 방법을 배우려면 공식 웹사이트로 이동하세요)
Hello world!
명령줄을 열고 프로젝트 CD 블로그를 입력하세요
시작하기 전에, 아시다시피 다양한 이유로 인해 npm은 외부 노드 웨어하우스 설치 도구로서 작동 중에 속도가 느려질 수 있습니다. 일반적으로 가속을 위해 taobao 소스를 사용하는 것이 좋습니다. 다운로드한 프로젝트에는 다음과 같은 코드가 포함되어 있습니다.
npm install --registry=https://registry.npm.taobao.org
vue 라우팅 관리를 다운로드하세요. 코드는 다음과 같습니다.
npm install vue-router --save-dev
/resources/assets/js/comComponents에 새 HelloComponent.vue 사용자 정의 구성 요소 파일을 생성합니다. 코드는 다음과 같습니다.
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>/resources/assets/js 아래에 새 폴더 라우터를 생성하고 그 안에 hello.js를 생성한 후 중첩된 라우팅 구성을 통해 새로 생성된 HelloComponent 컴포넌트에 hello 경로를 매핑합니다.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: "hello",
path: '/',
component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
},
]
})현재 laravel 프로젝트의 /resources/assets/js 아래에 기본 인터페이스와 중첩된 라우팅 뷰로 새 hello.vue를 생성합니다.
<template>
<div>
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>그런 다음 /resources/assets/js 아래에 hello.js를 생성하면 코드는 다음과 같습니다.
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
el: '#app',
router,
render: h=>h(App)
});다음 코드를 사용하여 /resources/views 아래에 새로운 hello.blade.php를 생성하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') }}"></script>
</body>
</html>/resources/routes/web.php에 새 경로를 추가하세요. 코드는 다음과 같습니다.
Route::view('/hello','/hello');
webpack.mix.js를 수정하면 코드는 다음과 같습니다.
mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/hello.js', 'public/js') .extract(['vue', "vue-router", "axios"]) .sass('resources/assets/sass/app.scss', 'public/css');
저장 후 명령줄의 프로젝트 디렉터리에서 npm run watch를 실행하여 다시 컴파일하세요.
명령줄의 프로젝트 디렉터리에 php artisan Serve를 입력하고 http://127.0.0.1:8000/hello를 방문하시면 됩니다. . 효과를 볼 수 있습니다
Laravel 5.5에는 Route::view 및 Route::redirect 메서드가 추가되었습니다. 5.4 이하의 경로는 다음과 같이 작성할 수 있습니다. Route::get('/hello', function () {return view( ' hello');});
【관련 추천: laravel 비디오 튜토리얼】
위 내용은 laravel에는 vue가 내장되어 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!