Laavel+Vue 가져오기에서 어셈블리 생성
6931 단어 PHPLaravelJavaScriptVue.js
환경 정보
Laavel 응용 프로그램 만들기
Laavel의 애플리케이션을 만듭니다.모르시는 분들은 아래 기사를 참고하세요.레일스 경험이 있는 사람을 대상으로 한다고 적혀 있지만 레일스 부분을 무시하면 레일스 초보자도 가능하다.
[Rails 경험이 있는 사람에게 적합] Laavel hello world로 프레임의 차이점을 간단히 살펴봅시다!
설치 노드
다음 사이트에서 node를 설치합니다.
https://nodejs.org/ja/download/
노드에 관해서는 과거 글에서 설치 절차를 한 번 설명했기 때문에 잘 모르시는 분들은 아래의 글을 참고하시기 바랍니다.
Vue.js+Bootstrap4로 그룹 사이트의 모형을 만들어 보세요!
npm 설치 라이브러리 사용하기
다음 명령을 사용하여 다양한 프로그램 라이브러리를 설치합니다.
$ npm install
welcome.blade.php 편집
resources/views/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">
<title>Laravel</title>
<!-- laravelmix style -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<header-component></header-component>
<example-component></example-component>
</div>
<!-- laravelmix-style -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
js 파일 편집
Resources/js/components에서 Header Component를 다운로드하십시오.vue를 추가합니다.내용은 다음과 같다.
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<h1>This is header!</h1>
</div>
</div>
</div>
</template>
<script>
</script>
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('header-component', require('./components/HeaderComponent.vue').default);
const app = new Vue({
el: '#app'
});
npm 컴파일 사용하기
터미널에서 다음 명령을 실행합니다.css와 js 관련 파일을 컴파일합니다.
npm run dev
최후
했던 일을 총결산해 봤지만 아직 잘 모르는 부분이 많아 차례로 보완하려고 한다.
참고 문장
Laavel에서 온 Vue입니다.js의 최단 레시피 사용하기
Reference
이 문제에 관하여(Laavel+Vue 가져오기에서 어셈블리 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masa08/items/0abe8c93ac75ef8ef98b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
