Laravel+vue 환경 배포
이 튜토리얼에서는 Laravel의 vue 배포를 소개합니다. Laravel에는 Vue 라이브러리를 사용하여 최신 JavaScript 작성을 더 쉽게 시작할 수 있는 몇 가지 기본 스캐폴딩이 포함되어 있습니다. Vue는 구성 요소를 사용하여 강력한 JavaScript 애플리케이션을 구축하기 위한 표현형 API를 제공합니다. Laravel Mix를 사용하면 JavaScript 구성요소를 브라우저에서 바로 사용할 수 있는 JavaScript 파일로 쉽게 컴파일할 수 있습니다.
관련 권장 사항: 최근 5개의 Laravel 비디오 튜토리얼, 최신 5개의 vue.js 비디오 튜토리얼 선택
laravel 만들기
먼저 작곡가가 필요하고 그 다음에는 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');});
Finally
때때로 npm을 실행할 때 Write EIO 오류가 표시되는데, 이는 인코딩 문제로 인해 발생할 수 있습니다. 이 경우 명령줄 파일을 관리자로 실행할 수 있습니다. , 또는 chcp 850 설정을 실행하세요. 활성 코드 페이지 번호, Laravel에서 Vue 배포에 대한 튜토리얼은 기본적으로 끝났습니다. Vue 구성 요소 작성에 대해 더 자세히 알아보려면 Vue 문서를 읽어보세요.
위 내용은 Laravel에서 vue를 배포하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!