Tailwind CSS 및 조회 테이블을 사용하여 Vue(합성 API 및 TypeScript)에서 동적 어셈블리 스타일 만들기

This article will assume some knowledge of Vue

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를 설정하여 기능 목록에서 [Vue 버전 선택] 및 [유형 스크립트]를 선택하고 나머지는 deffault로 유지할 수 있도록 합니다.프로젝트 설정이 완료되면 루트 디렉토리로 이동하여 다음 명령을 사용하여 Tailwind CSS를 설치할 수 있습니다.npm install tailwindcssTailwind 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 lang="ts">
    import { defineComponent, PropType } from 'vue'

    export default defineComponent({
        name: 'component--button',

        props: {
            color: {
                required: false,
                type: String as PropType<string>,
                default: 'primary',
                validator: value => {
                    return ['primary', 'secondary'].includes(value)
                }
            }
        }
    })
</script>

따라서 두 가지 동적 색상인 '주' 와 '차' 를 받아들일 수 있는 단추 구성 요소가 있습니다. 앞에서 설명한 바와 같이, 이 간단한 구성 요소에서도 이러한 동적 양식이 더욱 복잡한 구성 요소에서 어떻게 제어되지 않는지 쉽게 볼 수 있습니다.우리는 수동으로 템플릿의 동적 양식과 동기화해야 하는 색 도구 검증기가 하나 더 있습니다.

스타일을 추출하고 검증기와 검색표를 동기화합니다
만약 찾기표를 들어보지 못했다면, 찾기표는 간단한 키 값 대상입니다. 우리는 키와 데이터를 일치시킬 수 있습니다.우리는 검색표를 이용하여 동적 양식을 추출하고 검증기가 항상 동적 양식과 동기화되도록 확보할 수 있다.
이 예에서 우리는 src 디렉터리에 validators라는 새 폴더를 만들어서 찾기표를 저장할 것이다. 그러나 원한다면 같은 기술을 사용하여 구성 요소 파일에서 찾기표를 사용할 수도 있다.새 폴더 validators 를 만들면 Button.ts 라는 새 파일을 만듭니다.Button.ts에서 우리는 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 lang="ts">
/**/
import { ButtonColors } from '../validators/Button'

export default defineComponent({/**/})
</script>

다음에 color 도구에서 TypesScript는 문자열이 ButtonColors 찾기 테이블의 키와 같아야 한다는 것을 알고 ButtonColors 찾기 테이블의 키 그룹으로 현재 문자열 그룹을 대체해야 합니다.

<script lang="ts">
    export default defineComponent({
        /**/
        props: {
            color: {
                required: false,
                type: String as PropType<keyof typeof ButtonColors>,
                default: 'primary',
                validator: (value : string ) => {
                    return Object.keys(ButtonColors).includes(value)
                }
            }
        }
        /**/
    })
</script>

현재 우리는 구성 요소 템플릿의 동적 클래스를 처리하기 위해 계산 속성을 만들 수 있습니다. 우선 computed 에서 vue 를 가져와야 합니다. 방법은 defineComponent 와 PropType 같습니다.

<script>
    import { defineComponent, PropType, computed } from 'vue'
    /**/
</script>

이제 setup 방법을 사용하여 계산props 속성을 다음과 같이 매개 변수로 전달할 수 있습니다buttonColor.

<script>
/**/
export default defineComponent({
    /**/
    setup(props) {
        const buttonColor = computed(() : string  => {
            return ButtonColors[props.color]
        })

        return {
            buttonColor
        }
    }
})
</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 lang="ts">
    import { defineComponent, PropType, computed } from 'vue'

    import { ButtonColors } from '../validators/Button'

    export default defineComponent({
        name: 'component--button',

        props: {
            color: {
                required: false,
                type: String as PropType<keyof typeof ButtonColors>,
                default: 'primary',
                validator: (value : string ) => {
                    return Object.keys(ButtonColors).includes(value)
                }
            }
        },

        setup(props) {
            const buttonColor = computed(() : string  => {
                return ButtonColors[props.color]
            })

            return {
                buttonColor
            }
        }
    })
</script>

모든 것이 좋아 보입니다. 우리의 동적 양식이 추출되고, 우리의 검증기는 자동으로 우리가 추가한 새로운 동적 양식과 동기화됩니다. 그러나 불행하게도, 현재 우리의 구성 요소는 생산 중인 예상에 따라 양식 설정을 할 수 없습니다.고맙게도 프로젝트의 루트 디렉터리에서 tailwind.config.js 를 열고 purge 그룹에 'src/validators/*.js' 추가하는 아주 간단한 복구 방법이 있습니다. 이것은 PurgeCSS에서validators 폴더의 스타일을 검사하는 것을 알려 줍니다. 우리의 최종 purge 대상은 다음과 같습니다.

module.exports = {
/**/
    purge: [
        'src/**/*.vue',
        'src/validators/*.ts'
    ]
/**/
}

테스트
검색표가 생산 환경에서 정상적으로 작동하는지 테스트하려면 로컬 생산 환경에서 프로젝트를 테스트할 수 있습니다.노드를 먼저 설치합니다.js 정적 파일 서버:npm install -g serve설치 후 프로젝트의 루트 디렉토리로 이동하여 다음을 실행합니다.serve -s dist
결론
Vue 옵션 API, Tailwind 및 PurgeCSS에서 동적 클래스를 정리할 때 유용한 연습이 있음을 확인하시기 바랍니다.
만약 당신이 이 문장이 유용하다고 생각한다면, 저Medium,Dev.to와/또는을 주목해 주십시오.