hd cmps下載 - hd cmps原始碼下載

hd cmps

其他類別

v2.0.2)

下載

Hd-Cmps

弘度UI 元件庫--- 基於Element-UI

Build Setup

 # 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

dist 中存放已建置的hd-cmps
lib 中存放已建置的偵錯與文檔頁面，用於給使用者檢視範例與文檔
build 中存放了一些腳本與webpack配置
docs 中存放文檔頁面相關程式碼
examples 中存放偵錯頁面相關程式碼（不存放元件範例）
packages 存放元件，以及元件的文件和範例。
src 中存放組件共用的程式碼
static 中存放偵錯頁面用到的靜態檔案（如大的JSON檔案）
test 中存放測試用例

元件庫使用方式

你可以引入整個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-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 )
} ) ;