Tailwind 구성 요소 및 Vue 구현
저는 이번 주에 두 개의 프로젝트를 진행했으며 일부를 공유하고 싶습니다.
개인 웹사이트.
https://www.kevinodongo.com/
전체 튜토리얼 최종 제품을 이해하기 위해 테스트하고 놀 수 있도록 모든 작업 튜토리얼을 업로드할 개인 웹 사이트를 만들었습니다.
예를 들어 다음은 과정 자습서를 수행하고 웹 사이트에 응용 프로그램 링크를 업로드할 응용 프로그램 중 일부입니다.
여기에서 Docker 및 ECS/Fargate와 같은 다른 기술로 이동할 수 있습니다. Terraform 대 Cloudformation.
순풍과 Vue
나는 Vuetify CSS로 작업하는 것을 좋아했고 문서는 매우 간단했습니다. Tailwind가 와서 게임을 변경했습니다. Tailwind가 코딩을 쉽게 만드는 방식에 깊은 인상을 받았습니다. 전환하는 것은 악몽이었습니다. 그들의 문서는 달랐습니다. 그들은 무료 구성 요소만 제공했고 다른 것들은 구입해야 했습니다. 시작하려면 무료 구성 요소를 복사하고 편집해야 했습니다. 이는 전환하려는 사람에게 어려운 일이었습니다. CSS 유틸리티는 길었습니다. 어디에서 시작해야 합니까?. 그래서 쉽게 하기 위해 컴포넌트를 Vuetify 문서로 분리하기로 결정했습니다. Tailwind and Vue . 이제 레이아웃을 수행하고 필요한 구성 요소를 가져옴으로써 각 구성 요소를 쉽게 작업할 수 있습니다. 이것은 재미있는 프로젝트였지만 Vue 프로젝트에서 작업하는 사람에게 도움이 될 수 있다는 것을 깨달았습니다.
의제
내 의제는 모든 구성 요소를 분리하고 v-if, v-for, v-once, 전환 등을 사용하여 구현하는 것이었습니다. 이렇게 하면 새 사이트에서 작업하기가 쉬워집니다. 그리드와 플랙스박스로 레이아웃을 만들고 나면 나머지는 매우 쉽습니다.
내 웹사이트가 실행 중이라는 링크를 얻으려면 프로젝트 섹션으로 이동하여 Tailwind 및 Vue를 찾으십시오. 이것으로 모든 응용 프로그램을 리팩토링하고 있습니다.
다음은 Tailwind와 Vue입니다.
간단한 설명
버튼의 예를 들어보겠습니다. 아래는 Vuetify가 수행한 방법입니다. 선택할 수 있는 다양한 유형의 버튼이 있습니다. 선택, 추가 및 편집합니다.
이것이 제가 Tailwind 및 Vue 애플리케이션에서 수행한 방법입니다.
모든 다른 유형의 버튼. 원하는 것을 선택하고, 코드를 받고, 애플리케이션에서 편집하십시오.
내비게이션 서랍 Vuetify와 같은 것들은 다양하게 시작할 수 있었습니다. 이러한 구성 요소는 Tailwind 및 Vue로 구현 작업을 수행하므로 이전과 같이 쉽게 작업할 수 있습니다. Vue로 구현하는 방법에서 찾을 수 있습니다.
진심으로 Tailwinds CSS를 사용하여 포지셔닝의 중요성을 배웠습니다. 쉽게 작업하려면 상대 위치와 절대 위치의 개념을 이해해야 합니다.
응용 프로그램 레이아웃은 Flexbox 또는 Grid를 사용하여 얻을 수 있습니다. 오! 내가 Tailwind에서 당신을 찾을 예정인 Vuetify를 중심으로 내가 가장 좋아하는 것.
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
테일윈드에서 받았습니다.
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
캘린더, 툴팁, 캐러셀은 어떻습니까? 문서를 살펴보면 솔루션을 찾을 수 있습니다.
프로젝트는 작업 중인 프로젝트이지만 사용할 수 있습니다. 진행하면서 추가하고 수정할 수 있습니다.
누군가에게 그것이 개발 중에 정말로 도움이 되기를 바랍니다. 나는 그것을 내 코스와 튜토리얼에서 많이 사용할 것입니다.
고맙습니다
Reference
이 문제에 관하여(Tailwind 구성 요소 및 Vue 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
내 의제는 모든 구성 요소를 분리하고 v-if, v-for, v-once, 전환 등을 사용하여 구현하는 것이었습니다. 이렇게 하면 새 사이트에서 작업하기가 쉬워집니다. 그리드와 플랙스박스로 레이아웃을 만들고 나면 나머지는 매우 쉽습니다.
내 웹사이트가 실행 중이라는 링크를 얻으려면 프로젝트 섹션으로 이동하여 Tailwind 및 Vue를 찾으십시오. 이것으로 모든 응용 프로그램을 리팩토링하고 있습니다.
다음은 Tailwind와 Vue입니다.
간단한 설명
버튼의 예를 들어보겠습니다. 아래는 Vuetify가 수행한 방법입니다. 선택할 수 있는 다양한 유형의 버튼이 있습니다. 선택, 추가 및 편집합니다.
이것이 제가 Tailwind 및 Vue 애플리케이션에서 수행한 방법입니다.
모든 다른 유형의 버튼. 원하는 것을 선택하고, 코드를 받고, 애플리케이션에서 편집하십시오.
내비게이션 서랍 Vuetify와 같은 것들은 다양하게 시작할 수 있었습니다. 이러한 구성 요소는 Tailwind 및 Vue로 구현 작업을 수행하므로 이전과 같이 쉽게 작업할 수 있습니다. Vue로 구현하는 방법에서 찾을 수 있습니다.
진심으로 Tailwinds CSS를 사용하여 포지셔닝의 중요성을 배웠습니다. 쉽게 작업하려면 상대 위치와 절대 위치의 개념을 이해해야 합니다.
응용 프로그램 레이아웃은 Flexbox 또는 Grid를 사용하여 얻을 수 있습니다. 오! 내가 Tailwind에서 당신을 찾을 예정인 Vuetify를 중심으로 내가 가장 좋아하는 것.
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
테일윈드에서 받았습니다.
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
캘린더, 툴팁, 캐러셀은 어떻습니까? 문서를 살펴보면 솔루션을 찾을 수 있습니다.
프로젝트는 작업 중인 프로젝트이지만 사용할 수 있습니다. 진행하면서 추가하고 수정할 수 있습니다.
누군가에게 그것이 개발 중에 정말로 도움이 되기를 바랍니다. 나는 그것을 내 코스와 튜토리얼에서 많이 사용할 것입니다.
고맙습니다
Reference
이 문제에 관하여(Tailwind 구성 요소 및 Vue 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<template>
<v-row class="fill-height" justify="center" align="center" height="500px">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</v-row>
</template>
<div style="height: 500px" class="content-center">
// all items are centered in the middle of the parent
<div>Hello World!</div>
</div>
Reference
이 문제에 관하여(Tailwind 구성 요소 및 Vue 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kevin_odongo35/implement-tailwind-components-and-vue-5425텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
