antd는 vue와 함께 사용하기에 적합합니까?

antd는 vue에 적합합니다. ant 디자인에는 vue 버전이 있고 해당 이름은 vue 프로젝트에서 "ant-design-vue"이므로 "npm i --save ant-design-vue"를 사용할 수 있습니다. 명령을 설치하고 사용할 수 있습니다.

이 기사의 운영 환경: windows7 시스템, vue2.0 버전, Dell G3 컴퓨터.

ant 디자인의 vue 버전 - ant-design-vue 소개

ant-design-vue는 Ant Financial의 Ant Design이 공식적으로 권장하는 유일한 Vue 버전 UI 구성 요소 라이브러리입니다. 실제로는 Ant의 Vue 구현입니다. Design.Components 스타일은 Ant Design과 동기화되며, 컴포넌트의 html 구조와 CSS 스타일도 일관됩니다. 사용해 본 결과 이것이 실제로 몇 안 되는 완전한 VUE 구성 요소 라이브러리 및 개발 솔루션 통합 프로젝트 중 하나라는 것을 알게 되었습니다.

공식 홈페이지:

https://www.antdv.com/docs/vue/introduce-cn/

장점:

엔터프라이즈급 미드엔드, 백엔드 제품의 인터랙티브 언어와 비주얼 스타일에서 추출 .

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

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

ant-design-vue

1. 먼저 vue의 스캐폴딩 도구인 vue-cli를 사용하여 vue 프로젝트를 생성합니다

2. ant-design-vue

를 사용하여 프로젝트 경로로 전환합니다. 아래와 같이 [npm i --save ant-design-vue] 명령을 사용하여 설치합니다.

1.png

3. 글로벌 소개

(1) 소개 완료

main.js 글로벌 소개 및 등록

 import Antd from 'ant-design-vue'
  import 'ant-design-vue/dist/antd.css'
  Vue.use(Antd)

페이지에 등록된 컴포넌트를 소개할 필요 없이 모든 컴포넌트를 직접 사용할 수 있습니다

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

(2) 일부 컴포넌트 가져오기

프로젝트에서 사용해야 할 컴포넌트를 main.js에서 가져와서 등록

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

프로젝트에서 직접 사용할 수 있습니다. 등록된 이 컴포넌트를 사용하세요

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

추천: "vue tutorial"

위 내용은 antd는 vue와 함께 사용하기에 적합합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!