ant-design vue를 사용할 수 있나요?

개미 디자인 뷰가 가능합니다. ant design vue는 Ant Design 디자인 사양을 따르는 Vue를 사용하여 구현한 고품질 UI 컴포넌트 라이브러리로, 기업 수준의 미드엔드, 백엔드 제품을 개발하고 서비스하는 데 사용됩니다.

이 기사의 운영 환경: windows10 시스템, vue 2.9, thinkpad t480 컴퓨터.

추천: "vue Tutorial"

Ant Design Vue는 Ant Design 디자인 사양을 따르는 Vue를 사용하여 구현된 고품질 UI 컴포넌트 라이브러리로 기업 수준의 미드엔드 및 백엔드 제품을 개발하고 서비스하는 데 사용됩니다. .

Features

는 엔터프라이즈 수준의 중간 및 백엔드 제품의 대화형 언어와 시각적 스타일에서 추출됩니다.

즉시 사용 가능한 고품질 Vue 구성 요소.

React 디자인 도구 시스템의 Ant 디자인을 공유하세요.

지원 환경

최신 브라우저 및 IE9 이상(폴리필 필요).

서버 측 렌더링을 지원합니다.

설치

npm이나 Yarn을 사용하여 설치

개발 환경에서 쉽게 디버깅할 수 있을 뿐만 아니라 프로덕션 환경에서도 안전하게 패키징하고 배포할 수 있으므로 개발 시 npm이나 Yarn을 사용하는 것이 좋습니다. 전체 생태계와 도구를 즐기세요. 체인은 많은 이점을 제공합니다.

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

네트워크 환경이 좋지 않다면 cnpm 사용을 권장합니다.

컴포넌트 라이브러리는 vue의 새로운 기능인 슬롯 범위(2.5.0의 새로운 기능), 제공/주입(2.2.0의 새로운 기능)을 사용합니다.

브라우저 소개

스크립트 및 링크 태그를 사용하여 브라우저에 파일을 직접 소개하고 전역 변수 antd를 사용하십시오.

npm 릴리스 패키지의 ant-design-vue/dist 디렉터리에 antd.js antd.css 및 antd.min.js antd.min.css를 제공합니다. https://www.jsdelivr.com/package/npm/ant-design-vue 또는 UNPKG를 통해서도 다운로드하실 수 있습니다.

요청 시 로드할 수 없는 빌드된 파일을 사용하는 것은 강력히 권장되지 않으며, 기본 종속 모듈에 대한 빠른 버그 수정 지원을 받기도 어렵습니다.

참고: antd.js를 소개하기 전에 순간을 직접 소개해야 합니다.

예

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)

스타일 소개:

import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'

요청 시 로드

다음 두 가지 방법은 사용된 구성 요소만 로드할 수 있습니다.

babel-plugin-import를 사용하세요(권장).

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

참고: webpack 1에는 libraryDirectory 설정이 필요하지 않습니다.

그런 다음 ant-design-vue에서 모듈을 가져오면 스타일을 별도로 가져올 필요가 없습니다. 아래의 수동 도입 방법과 동일합니다.

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

수동으로 소개

import DatePicker from 'ant-design-vue/lib/date-picker';  // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css';        // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS

ant-design-vue 정보

우리 모두 알고 있듯이 Ant Design은 수년간의 반복과 축적을 거쳐 디자인 언어로 출시되었으며 UI 디자인 아이디어는 사실상 하나의 세트가 되었습니다. 많은 프론트 엔드 개발자와 기업이 찾고 사랑하며 React 개발자의 손에 있는 마법의 무기이기도 합니다. ant-design-vue를 통해 Vue 개발자들이 Ant Design의 뛰어난 디자인을 즐길 수 있기를 바랍니다.

ant-design-vue는 Ant Design의 Vue 구현입니다. 구성 요소의 스타일은 Ant Design과 동기화되며 스타일 수정이 전혀 발생하지 않습니다. 구성 요소 API도 최대한 일관성을 유지합니다.

Ant Design Vue는 프로그래머에게 즐거운 개발 경험을 제공하기 위해 최선을 다하고 있습니다.

위 내용은 ant-design vue를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!