Laravel + SQLite + Vue.js + Pug + Stylus 환경 구축
할 일
Laravel 설치
우선 Laravel의 환경 구축 평소의 녀석
❯ mkdir Laravel-test && cd Laravel-test
❯ composer create-project --prefer-dist laravel/laravel ./
❯ yarn install
SQLite 설정
설정과 시작이 필요하지 않은
SQLite DB 구축은 간단하고 테스트 환경에 수요가 있다고 생각했습니다..env를 편집합니다.DB_CONNECTION=sqlite
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=homestead
# DB_USERNAME=homestead
# DB_PASSWORD=secret
다음 명령 실행
❯ touch database/database.sqlite❯ php artisan migrate끝입니다.Vue.js 설정
우선,
welcome.blade.php에 Vue.js로 쓴 물건이 보이는 형태가 되면 골이라고 생각합니다.추가하는 것은 다음과 같습니다.
welcome.blade.php
...
<!-- <head>の中に追加 -->
<meta name="csrf-token" content="{{ csrf_token() }}">
...
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
...
<!-- </body>の手前に追加 -->
<div id="app">
<example-component></example-component>
</div>
<script src=" {{ asset('js/app.js') }} "></script>
...
Vue.js가 준비되었습니다.
서버 및 자동 빌드(watch) 시작
텍스트 편집기
VSCode 사용하고 있습니다.터미널을 두 개 사용하여 두 개의 명령을 동시에 시작합니다.
❯ php artisan serve ❯ yarn watch 그런 다음 브라우저에서
localhost:8000로 이동하여 아래로 스크롤하면 기본 Vue.js 결과가 표시됩니다.※리로드는 스스로 하지 않으면 안 되어 조금 번거로움. 더 좋은 방법(hot을 사용한다든가)은, 있습니다.
우선, 보통의 Vue.js는 여기까지 완료입니다٩( 'ω' )و
고마워요.
Vue.js에 Pug와 Stylus 도입
여기부터는 번외편 같은 느낌입니다.
Vue.js의 template 안에 Pug와 Stylus를 사용할 수 있습니다!
Pug 및 Stylus 설치
❯ yarn add -D pug pug-plain-loader
❯ yarn add -D stylus stylus-loader
Webpack 설정 변경
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
module: {
rules: [{
test: /\.pug$/,
loader: 'pug-plain-loader'
},{
test: /\.styl(us)?$/,
loader: 'style-loader',
}],
}
});
끝입니다.
Vue.js 코드
ExampleComponent.vue
<template lang="pug">
div.container
div.row.justify-content-center
div.col-md-8
div.card
div.card-header Example Component
div.card-body I'm an example component.ccc
</template>
<style lang="stylus">
.card-header
color: tomato
</style>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
표시 결과
여기까지 정말 고마워요.
즐거운 Laravel + Vue.js 라이프로 풀 스택인 엔지니어 체험해 보세요!
더 열심히 해! ٩(ˊᗜˋ*)و
덤
그 밖에도 Vue.js에 넣고 싶은 것이 있으면 Vue.js 공식에 하는 방법이 있습니다.
이것을 보거나 구그하거나해서 추가해 가면 좋다고 생각합니다.
감상
Laravel이 기본적으로 Vue.js를 설치하는 사양으로되어 있다는 것은 놀랐습니다!
그리고 Vue.js의 template를 Pug와 Stylus로 쓸 수있어 매우 편리하고 놀랐습니다!
(´⊙ω⊙`)
덧붙여서 Pug와 Stylus와 Express (Node.js의 간단한 프레임 워크)는 개발자가 같은 것 같습니다. 정말 심플하고 최적화된 물건을 좋아하는 사람이지요. (매우 공감합니다.)
참고
이 기사가 없으면 그렇게하지 않았습니다!
덕분에 너무 시간이 걸리지 않았습니다. 감사합니다(๑˃̵ᴗ˂̵)♪
- Vue.js + Pug + Stylus 샘플 개발 환경
- Laravel에서 Vue.js를 사용하는 최단 레시피
- Laravel의 DB를 SQLite로 변경
- Stylus 입문했을 때의 정리
Reference
이 문제에 관하여(Laravel + SQLite + Vue.js + Pug + Stylus 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yusk24/items/fc178be284e43769bd05텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
