Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- laravel
- linux
- ec2
- ubuntu
- ruby
- centOS7
- docker-compose
- SQL
- cron
- react
- staging area
- Python
- props
- php
- pagination
- controller
- Git
- docker
- Wordpress
- codeigniter4
- Selenium
- working directory
- dockerfile
- imagemagick
- vue
- Ruby On Rails
- NGINX
- AWS
- MySQL
- javascript
Archives
- Today
- Total
내가 한 노력들
[Laravel + Vue.js ] 나만의 To Do List만들기 - Vue 설치 및 초기설정 본문
Vue 설치
Laravel 에서 Vue를 사용하기 위해서는 우선 npm을 이용해 설치를 해야합니다.
npm install --save vue@next && npm install --save-dev vue-loader@next
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
resources/js/components/ToDoList.vue
<template>
//
</template>
<script>
export default {
//
}
</script>
app.js
import { createApp } from 'vue'
import ToDoList from './components/ToDoList.vue';
const app = createApp({});
app.component('to-do-list', ToDoList)
.mount('#app');
require('./bootstrap');
main layout
<div id="app" class="h-full">
<div class="h-full flex flex-col">
@yield('content')
</div>
</div>
welcome.blade.php
@extends('layout.main')
@section('content')
<div class="flex-1 h-full bg-gray-700 text-white">
<to-do-list />
</div>
@endsection
Mix
npm run watch
오류가 떠도 다시한번 위의 명령어를 입력하면, 정상적으로 컴파일이 완료됩니다.
여기까지가 Laravel에서 Vue설치 및 초기 설정입니다.
'IT 공부 > Laravel' 카테고리의 다른 글
[ Laravel + Vue.js ] 나만의 To Do List 만들기 - DB에서 data 받아오기 (0) | 2021.08.29 |
---|---|
[ Laravel + Vue.js ] 나만의 To Do List 만들기 - To Do를 DB에 저장 (0) | 2021.08.29 |
[Laravel + Vue.js] 나만의 To Do List 만들기 (0) | 2021.08.29 |
[ Laravel ] 프로젝트 Jetstream 사용하기 (0) | 2021.08.08 |
[ Laravel ] 유저 블라인드 기능 (0) | 2021.05.04 |