hd cmpsダウンロード-HD hd cmpsソースコードのダウンロード

hd cmps

その他のカテゴリー

v2.0.2)

ダウンロード

HD-CMP

Hongdu 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が角質に組み込まれています
LIBに組み込まれているデバッグページとドキュメントページは、ユーザー向けの例とドキュメントを表示するために使用されます
ビルドには、いくつかのスクリプトとWebパック構成があります
ドキュメントの関連コード関連コード
Exmplesでテストページ関連コードを削除する（ストレージコンポーネントの例なし）
パッケージストレージコンポーネント、およびコンポーネントのファイルと例。
SRCストレージコンポーネントで共有されるコード共存
テストページで使用される静的ファイル（大きなJSONファイルなど）
テストでテストケースを保存します

コンポーネントライブラリの使用方法

HD-CMP全体を導入するか、必要に応じてコンポーネントの一部のみを導入できます。

完全に紹介します

 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-Componentの助けを借りて、プロジェクトのボリュームを減らす目的を達成するために必要なコンポーネントを導入することしかできません。

最初にBabel-Plugin-Componentをインストールします。

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 )
} ) ;