Tailwind CSS 및 찾기 테이블을 사용하는 Vue의 동적 어셈블리 스타일
16158 단어 vuecsstutorialjavascript
This article will assume some knowledge of Vue
TypeScript 버전의 합성 API를 찾을 수 있습니다.
지난주에, 나는 Nuxt에서 동적 구성 요소 스타일을 사용할 때, 검색표를 사용하는 방법을 소개했는데, 당신은 찾을 수 있습니다.이번 주에는 Nuxt를 사용하는 것처럼 Vue 3을 사용했습니다. Vue에서는 동적 구성 요소 스타일을 사용할 때 찾기 테이블을 사용했습니다. 다음 방법은 다음과 같습니다.
순풍과 정화
순풍 CSS는 현재 프런트엔드 개발에서 가장 핫한 화제 중의 하나다.Adam Wathan이 만든 유틸리티 우선 CSS 프레임워크는 지난 몇 년 동안 보조 프로젝트에서 성공적인 업무로 발전해 왔다.Tailwind를 사용한 적이 있다면, 구축할 때 PurgeCSS를 이용하여 사용하지 않은 스타일을 편집하고 웹 프로그램에서 사용하는 클래스로만 구성된 간소화 스타일시트를 만들 수 있습니다.이제 많은 프레임에서 PurgeCSS를 사용하여 제작 스타일시트에서 불필요한 볼륨을 제거합니다.
PurgeCSS는 훌륭한 플러그인이지만, 자바스크립트를 해석하거나 실행할 수 없으며, 대부분의 경우 구축할 때만 사용됩니다.따라서 잘못 사용하면 개발 환경과 생산 환경 사이에 예상치 못한 불일치가 생길 수 있다.
Tailwind CSS를 사용하여 새로운 Vue 프로젝트를 시작합니다.
먼저 터미널을 열고 다음 명령을 실행하여 새 Vue 설치를 만듭니다.
vue create <your-project-name>
CLI 지침에 따라 기본 Vue 3 항목을 설정합니다.프로젝트 설정이 완료되면 루트 디렉토리로 이동하여 다음 명령을 사용하여 Tailwind CSS를 설치할 수 있습니다.npm install tailwindcss
Tailwind CSS가 성공적으로 설치되면 다음 명령을 사용하여 만들어야 합니다tailwind.config.js
.npx tailwindcss init
tailwind.config.js
파일을 만든 후 스캔.vue
파일의 클래스로 설정해야 합니다.우선, 우리는 future
대상의 속성 주석을 취소하여, 장래의 업그레이드를 더욱 쉽게 할 것이다.그런 다음 purge
배열에 다음 행을 추가합니다.'src/**/*.vue',
이제 우리는Tailwind 스타일시트를 만듭니다.
src/assets
폴더로 이동하여 css
라는 새 디렉토리를 만들고 styles.css
라는 새 파일을 만들고 Tailwind CSS 가져오기로 채웁니다.@tailwind base;
@tailwind components;
@tailwind utilities;
스타일시트가 설정되었으므로 main.js
디렉토리에서 src
파일을 열고 다음 행을 추가하여 응용 프로그램으로 가져올 수 있습니다.import '@/assets/css/styles.css';
마지막으로 PurgeCSS 프로필을 만들고 프로젝트 루트 디렉토리에 새 파일을 다시 만들어야 합니다. 이 파일은 postcss.config.js
이고 다음 코드를 사용하여 구성해야 합니다.// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
Vue에서 순풍으로 동적 어셈블리 스타일
Vue 구성 요소의 핵심 기능 중 하나는 도구를 전달하는 능력이다.도구는 구성 요소에 전달되는 사용자 정의 속성으로 외관과 기능을 제어하는 데 사용됩니다.Tailwind를 사용하여 두 가지 색상을 수락하는 간단한 버튼 구성 요소를 만드는 방법을 살펴보겠습니다. "주요적"및 "부차적"
<template>
<button
class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
:class="{
'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800' : color == 'primary',
'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800' : color == 'secondary'
}"
>
<slot />
</button>
</template>
<script>
export default {
name: 'component--button',
props: {
color: {
required: false,
type: String,
default: 'primary',
validator: value => {
return ['primary', 'secondary'].includes(value)
}
}
}
}
</script>
따라서 두 가지 동적 색상인 '주' 와 '차' 를 받아들일 수 있는 단추 구성 요소가 있습니다. 앞에서 설명한 바와 같이, 이 간단한 구성 요소에서도 이러한 동적 양식이 더욱 복잡한 구성 요소에서 어떻게 제어되지 않는지 쉽게 볼 수 있습니다.우리는 수동으로 템플릿의 동적 양식과 동기화해야 하는 색 도구 검증기가 하나 더 있습니다.스타일을 추출하고 검증기와 검색표를 동기화합니다
만약 찾기표를 들어보지 못했다면, 찾기표는 간단한 키 값 대상입니다. 우리는 키와 데이터를 일치시킬 수 있습니다.우리는 검색표를 이용하여 동적 양식을 추출하고 검증기가 항상 동적 양식과 동기화되도록 확보할 수 있다.
이 예에서 우리는
src
디렉터리에 validators
라는 새 폴더를 만들어서 찾기표를 저장할 것이다. 그러나 원한다면 같은 기술을 사용하여 구성 요소 파일에서 찾기표를 사용할 수도 있다.새 폴더 validators
를 만들면 Button.js
라는 새 파일을 만듭니다.Button.js
에서 우리는 const
라는 이름의 ButtonColors
을 내보낼 것이다. 이것은 동적 스타일의 키 값 쌍을 포함하는 검색표이다. 아래와 같다.export const ButtonColors = {
'primary': 'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800',
'secondary': 'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800'
}
현재 우리는 우리의 동적 양식을 검색표에 추출했습니다. 구성 요소에 대한 변경이 필요합니다. 우선, 시작 스크립트 표시줄 아래에서 우리의 것을 가져와야 합니다. ButtonColors const
<script>
import { ButtonColors } from '@/validators/Button'
export default {/**/}
</script>
다음은 color
도구 검증기에서 ButtonColors
검색표의 키 그룹으로 이 그룹을 대체합니다./**/
validator: (value) => {
return Object.keys(ButtonColors).includes(value)
},
/**/
이제 어셈블리 템플릿의 동적 클래스를 처리하는 계산 속성을 생성할 수 있습니다.<script>
/**/
export default {
/**/
computed: {
buttonColor() {
return ButtonColors[this.color]
},
}
}
</script>
그런 다음 템플릿의 모든 동적 클래스를 새 계산 속성으로 대체할 수 있습니다.<template>
<button
class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
:class="[buttonColor]"
>
<slot />
</button>
</template>
전반적으로 다음과 같은 구성 요소 템플릿을 제공합니다.<template>
<button
class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
:class="[buttonColor]"
>
<slot />
</button>
</template>
<script>
import { ButtonColors } from '@/validators/Button'
export default {
name: 'component--button',
props: {
color: {
required: false,
type: String,
default: 'primary',
validator: value => {
return Object.keys(ButtonColors).includes(value)
}
}
},
computed: {
buttonColor() {
return ButtonColors[this.color]
},
}
}
</script>
모든 것이 좋아 보입니다. 우리의 동적 양식이 추출되고, 우리의 검증기는 자동으로 우리가 추가한 새로운 동적 양식과 동기화됩니다. 그러나 불행하게도, 현재 우리의 구성 요소는 생산 중인 예상에 따라 양식 설정을 할 수 없습니다.고맙게도 프로젝트의 루트 디렉터리에서 tailwind.config.js
를 열고 purge
그룹에 'src/validators/*.js'
추가하는 아주 간단한 복구 방법이 있습니다. 이것은 PurgeCSS에서validators 폴더의 스타일을 검사하는 것을 알려 줍니다. 우리의 최종 purge
대상은 다음과 같습니다.module.exports = {
/**/
purge: [
'src/**/*.vue',
'src/validators/*.js'
]
/**/
}
테스트
검색표가 생산 환경에서 정상적으로 작동하는지 테스트하려면 로컬 생산 환경에서 프로젝트를 테스트할 수 있습니다.노드를 먼저 설치합니다.js 정적 파일 서버:
npm install -g serve
설치 후 프로젝트의 루트 디렉토리로 이동하여 다음을 실행합니다.serve -s dist
결론
Vue 옵션 API, Tailwind 및 PurgeCSS에서 동적 클래스를 정리할 때 유용한 연습이 있음을 확인하시기 바랍니다.
만약 당신이 이 문장이 유용하다고 생각한다면, 저Medium,Dev.to와/또는을 주목해 주십시오.
Reference
이 문제에 관하여(Tailwind CSS 및 찾기 테이블을 사용하는 Vue의 동적 어셈블리 스타일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/wearethreebears/dynamic-component-styles-in-vue-options-api-using-tailwind-css-and-lookup-tables-3nac텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)