hd cmps 다운로드 - hd cmps 소스 코드 다운로드

hd cmps

기타 카테고리

v2.0.2)

다운로드

HD-Cmps

홍두 UI 컴포넌트 라이브러리 --- Element-UI 기반

빌드 설정

 # Clone project
git clone 

# Install dependencies
npm install

# 新建一个组件
npm run add

# 打开文档页面
npm run dev

# build for production with minification
npm run dist

# 全量发布组件
npm run pub

# 分别发布packages内的组件（待调试）
npm run pub:all

# 运行单元测试（单次）
npm run test

# 运行单元测试（会监听文件，多次运行测试）
npm run test:watch

디렉토리 구조

 |- hd-cmps
||-- dist
||-- lib
||-- build
||-- docs
||-- examples
||-- packages
|||--- hd-search
||||---- index.js
||||---- example.vue
||||---- README.md
||||---- src
|||||----- hd-search.vue
||-- src
||-- static
||-- test
|||--- unit
||||---- coverage
||||---- specs

빌드된 hd-cmps는 dist에 저장됩니다.
빌드된 디버깅 및 문서 페이지는 사용자가 예제와 문서를 보는 데 사용되는 lib에 저장됩니다.
일부 스크립트 및 웹팩 구성은 빌드에 저장됩니다.
문서 페이지 관련 코드가 문서에 저장됩니다.
디버그 페이지 관련 코드는 예제에 저장됩니다. (컴포넌트 예제는 저장되지 않습니다.)
패키지에는 구성 요소 문서와 예제뿐 아니라 구성 요소도 저장됩니다.
src는 구성 요소가 공유하는 코드를 저장합니다.
static은 디버깅 페이지에 사용되는 정적 파일(예: 대용량 JSON 파일)을 저장합니다.
테스트 케이스는 테스트에 저장됩니다.

컴포넌트 라이브러리 사용 방법

전체 hd-cmps를 가져오거나 필요한 경우 일부 구성 요소만 가져올 수 있습니다.

전체 소개

 import Vue from 'vue' ;
import App from './App.vue' ;
import HdCmps from 'hd-cmps' ;
import 'hd-cmps/dist/theme/index.css' ;

Vue . use ( HdCmps ) ;

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} ) ;

요청 시 가져오기(권장)

babel-plugin-comfort의 도움으로 프로젝트 규모를 줄이는 데 필요한 구성요소만 도입할 수 있습니다.

먼저 babel-plugin-comfort를 설치하세요:

npm install babel-plugin-component -D

그런 다음 .babelrc를 다음과 같이 수정합니다.

{
  "presets" : [[ " es2015 " , { "modules" : false }]],
  "plugins" : [
    [
      " component " ,
      {
        "libraryName" : " hd-cmps " ,
        "styleLibrary" : {
          "name" : " theme " ,
          "base" : false
        },
        "libDir" : " dist "
      }
    ]
  ]
}

다음으로, HdSearch 및 HdTable과 같은 일부 구성요소만 도입하려면 main.js에 다음 내용을 작성해야 합니다.

 import Vue from 'vue' ;
import { HdSearch , HdTable } from 'hd-cmps' ;
import App from './App.vue' ;

Vue . component ( 'HdSearch' , HdSearch ) ;
Vue . component ( 'HdTable' , HdTable ) ;
/* 或写为
 * Vue.use(HdSearch)
 * Vue.use(HdTable)
 */

new Vue ( {
  el : '#app' ,
  render : h => h ( App )
} ) ;