Laravel, Vue 3 및 Tailwind를 사용하여 프로젝트 템플릿 만들기 - 섹션 2
Laravel, Vue 3 및 Tailwind를 사용하여 프로젝트 템플릿 만들기
2부<-왔구나.
미풍을 설치하다
Laravel 프레임워크를 설치할 때처럼 Breeze를 추가하는 것은 매우 간단합니다.몇 개의 명령만 있으면 우리가 필요로 하는 모든 내용을 추가할 수 있다.
composer require laravel/breeze --dev
php artisan breeze:install
npm install
npm run dev
breeze:install 명령은 프로젝트 구조에 대량의 파일을 추가합니다.resources 폴더에서 인증에 특정한 보기가 추가된 것을 볼 수 있습니다.로그인, 등록 또는 암호 재설정 보기입니다.새 components 폴더가 하나 더 있습니다.이것들은 Laravel Components 칼날 템플릿이지만, 일부 추가 마력이 있어, 공동으로 작업하여 본질적으로 더욱 절차적이다.우리는 이곳에서 그것들을 상세하게 소개하지 않을 것이니, 더 많은 정보를 알고 싶으면 문서를 보십시오.네비게이션을 위한 폴더layouts가 있고 게스트와 인증된 사용자에게 레이아웃을 제공합니다.마지막으로 dashboard.blade.php는 views 폴더의 루트 단계에 추가됩니다.이것은 사용자가 프로그램에 성공적으로 로그인했을 때 되돌아오는 보기입니다.app\View\Components에는 상응하는 종류가 있다.app\Http\Controllers\Auth와 LoginRequest에 각각 여러 개의 컨트롤러app\Http\Requests\Auth가 추가되었습니다.우리는 경routes/auth.php과 인routes/web.php의 새로운 노선을 늘렸다.우리RouteServiceProvider도 업데이트되었고 사용자가 인증을 하면 사용자를 /dashboard로 바꿀 수 있습니다.우리의 인증 과정도 테스트가 있지만, 우리는 곧 시작할 것이다.테스트를 시작하기 전에 Breeze가 덮어쓰고 새 변경 사항을 이전 버전의 파일과 병합하는 파일에 접근해야 합니다.저희
package.json에서 저희가 설치한 일부 패키지 버전이 변경되었을 수도 있습니다.이것들은 모두 그다지 중요하지 않기 때문에, 만약 네가 이전 버전으로 복원하고 싶다면, 나는 너에게 남겨 줄 것이다.중요한 것은 새로운 소프트웨어 패키지를 추가한 것이다.@tailwindcss/forms, alpinejs, postcss-import 모두 Breeze starter 키트에 필요합니다.새 패키지를 사용하려면 app.js, webpack.mix.js 및 tailwind.config.js를 변경해야 합니다.// resources/js/app.js
require("./bootstrap");
require('alpinejs');
import { createApp, h } from "vue";
...
// webpack.mix.js
...
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
purge: ['./storage/framework/views/*.php', './resources/views/**/*.blade.php'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
opacity: ['disabled'],
},
},
plugins: [require('@tailwindcss/forms')],
};
alpinejs를 주javascript 파일에 추가하고 CSS 구축 과정에서 postcss-import와 autoprefixer를 포함할 뿐입니다.tailwind.config.js의 변화는 조금 크다. 비록 유일하게 진정으로 필요한 것은 우리의 설정에 공식적인 순풍forms plugin을 추가하는 것이다.마지막으로 언급해야 할 변화는 resources/css/app.css이다.Breeze는 이 파일을 업데이트하여 tailwind 기본 스타일을 포함하는 다른 구문을 사용합니다.나는 @tailwind 문법의 간결함을 좋아하지만, 이 두 가지 옵션은 모두 가능하다.welcome 보기에 로그인과 등록 페이지의 링크를 추가합니다.// resources/views/welcome.blade.php
...
<body>
@if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
@auth
<a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 underline">Dashboard</a>
@else
<a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
@endif
@endauth
</div>
@endif
<div id="app" class="flex items-center bg-gray-100 min-h-screen">
<home />
</div>
...
php artisan migrate을 실행하면 우리는 사용자를 등록할 수 있습니다.등록하면 Breeze에서 만든 대시보드로 리디렉션해야 합니다.우리의 인증 시스템은 이미 자리에 앉았다!PHPUnit 구성
Laravel 중 일부great tools는 PHPUnit 기능을 확장하여 TDD가 모든 Laravel 프로젝트에 적합하도록 했다.테스트 설정의javascript 부분에 들어가기 전에 설정에 대한 추가 변경만 하면 됩니다.저희
phpunit.xml 파일에서 PHP 부분의 2개 항목에 대한 주석을 취소하여 테스트할 때 메모리에서 sqlite를 사용하도록 하겠습니다.// phpunit.xml
...
<php>
<server name="APP_ENV" value="testing"/>
<server name="BCRYPT_ROUNDS" value="4"/>
<server name="CACHE_DRIVER" value="array"/>
<server name="DB_CONNECTION" value="sqlite"/>
<server name="DB_DATABASE" value=":memory:"/>
<server name="MAIL_MAILER" value="array"/>
<server name="QUEUE_CONNECTION" value="sync"/>
<server name="SESSION_DRIVER" value="array"/>
<server name="TELESCOPE_ENABLED" value="false"/>
</php>
...
vendor/bin/phpunit를 사용하여 테스트를 실행할 수 있지만 Laravel은 아주 좋은 기능parallel testing을 가지고 있습니다. 이것은 여러 개의 핵에서 테스트를 실행함으로써 대형 테스트 세트의 테스트 시간을 크게 단축시켰습니다.이 점에서 뚜렷한 개선은 없을 수도 있지만, 어쨌든 우리는 그것을 추가할 것이다.php artisan test --parallel를 실행하면 설치를 묻는 메시지가 표시됩니다brianium/paratest.일단 설치되면 같은 명령이 테스트 세트를 실행합니다.php artisan test --parallel
Jest를 통한 Javascript 테스트
이 버전의 프로젝트 템플릿에서 우리가 실현하고자 하는 마지막 목표는 전방에 자동화 테스트 기능을 제공하는 것이다.자바스크립트 생태계에서 이 점을 할 수 있는 방법은 매우 많다.Jest를 주요 테스트 도구로 사용하고Vue Test Utils Vue 단일 파일 구성 요소(SFC)를 테스트할 수 있습니다.
다음 명령을 실행하면 필요한 모든 가방을 한꺼번에 추가할 수 있습니다.
npm install --save-dev jest vue-jest@~5.0.0-alpha babel-jest @babel/core @babel/preset-env @vue/test-utils@next
jest.config.js 및 babel.config.js에 추가하거나 관련 섹션만 package.json에 추가할 수 있습니다.// package.json
...
"jest": {
"testRegex": "tests/components/.*.test.js$",
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/resources/js/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.vue$": "<rootDir>/node_modules/vue-jest"
}
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
testRegex.Jest에서 테스트 파일을 찾는 모드입니다.components 폴더에 tests라는 새 폴더를 추가합니다.이제 Jest에서 test.js로 끝나는 파일을 찾을 수 있습니다.또 다른 상용 기준은 spec.js이다.Home 구성 요소에 간단한 테스트를 추가합니다.// tests/components/Home.test.js
import Home from '../../resources/js/components/Home.vue';
import { mount } from '@vue/test-utils'
test('displays message', () => {
const wrapper = mount(Home);
expect(wrapper.text()).toContain('Home component')
});
// package.json
...
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"test": "jest",
"testing": "jest --watch"
},
...
npm run test
결론과 다음 단계
우리의 프로젝트 템플릿의 기본 버전은 가장 기본적인 실험의 시작 과정을 간소화하는 데 도움이 되지만 이 버전은 신분 검증과 실행 가능한 테스트 구동 개발 작업 흐름을 가지고 있어 실제 프로젝트에 더욱 실용적이다.따라서 이런 템플릿을 사용하면 우리는 더 많은 시간을 절약할 수 있다.작업 템플릿은 Github에서 다시 찾을 수 있습니다.다음에 사용자와 더 많은 상호작용을 필요로 하는 프로젝트를 위해 페이지 응용 프로그램 템플릿을 설정할 것입니다.
Reference
이 문제에 관하여(Laravel, Vue 3 및 Tailwind를 사용하여 프로젝트 템플릿 만들기 - 섹션 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/heynolnor/creating-a-project-template-using-laravel-vue-3-and-tailwind-part-2-e1p
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Laravel, Vue 3 및 Tailwind를 사용하여 프로젝트 템플릿 만들기 - 섹션 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/heynolnor/creating-a-project-template-using-laravel-vue-3-and-tailwind-part-2-e1p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
