NUXT 앱에서 개미 디자인 시스템 설정 및 사용자 정의

UI 라이브러리는 때때로 번거롭고 커스터마이징하기가 어려울 수 있지만 Ant Design은 사용자 친화적, 유연한 불이행 및 우아한 디자인으로 두드러집니다. 이로 인해 툴킷에 환영받는 추가 기능이 있습니다.

Nuxt.js 및 Ant Design은 특히 NUXT의 정적 사이트 생성 기능을 통해 최적화 된 성능을 위해 NUXT의 코드 분할 및 트리 쉐이킹을 활용하는 강력한 조합입니다. 이를 통해 개미 디자인과 같은 풍부한 UI 라이브러리를 사용할 때에도 고성능 응용 프로그램이 가능합니다.

포괄적 인 문서가 현재 제한되어 있기 때문에 몇 단계가 필요합니다. 과정을 살펴 보겠습니다.

NUXT 앱에 개미 디자인을 통합합니다

먼저 필요한 패키지를 설치하십시오.

 원사는 개미 디자인 vue를 덜 로더로 추가합니다
# 또는
NPM은 Ant-Design-vue가 적은 로더를 설치하십시오

다음으로, 전 세계적으로 개미 디자인을 등록하기위한 플러그인 ( antd-ui.js )을 만듭니다.

 'vue'에서 Vue 가져 오기
'Ant-Design-Vue/Lib'에서 Antd 가져 오기

vue.use (Antd)

참고 : 표준 개미 설계 설정과 달리 글로벌 CSS를 가져 오지 않습니다. 대신 더 쉽게 사용자 정의 할 수 있도록 적은 변수를 통해 스타일을 관리 할 것입니다.

이제 nuxt ( nuxt.config.js )를 구성합니다.

1. 플러그인 등록 :

    플러그인 : [ "@/플러그인/antd-ui"],

2. 덜 컴파일 활성화 :

    짓다: {
     로더 : {
       더 적은: {
         하원 : {
           Javascriptenabled : True,
         },
       },
     },
   },

3. 더 적은 변수에 대해 글로벌 스타일 시트를 지정하십시오.

    CSS : [
     "~/자산/변수.
   ],,

variables.less 만들어 ANT 디자인의 기본값을 가져 와서 재정의를 적용하려면리스 파일 ( /assets )을 만듭니다.

 @import '~ ant-design-vue/dist/antd.less';

@1 차 컬러 : #1890ff;
@link-color : #1890ff;
@success-color : #52C41A;
@경고-콜로 : #faad14;
@Error-Color : #f5222d;
@font-size-base : 14px;
@Heading-Color : RGBA (0, 0, 0, 0.85);
@Text-Color : RGBA (0, 0, 0, 0.65);
@Text-Color-Secondary : RGBA (0, 0, 0, 0.45);
@disabled-color : rgba (0, 0, 0, 0.25);
@Border-Radius-Base : 4px;
@Border-Color-Base : #d9d9d9;
@Box-Shadow-Base : 0 2PX 8PX RGBA (0, 0, 0, 0.15);

그게 다야! NUXT는 구성 요소 가져 오기를 자동으로 처리합니다. 매우 특정한 스타일의 경우 변수로 덮지 않으면 layouts/default.vue 파일 내에서 스타일을 조정하십시오.

Ant Design과 Nuxt는 신속한 응용 프로그램 개발을위한 간소화되고 효율적인 프레임 워크를 제공합니다. 즐기다!

위 내용은 NUXT 앱에서 개미 디자인 시스템 설정 및 사용자 정의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!