hd cmps herunterladen - hd cmps Quellcode herunterladen

hd cmps

Andere Kategorien

v2.0.2)

Herunterladen

HD-Cmps

Hongdu UI-Komponentenbibliothek --- basierend auf 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

Verzeichnisstruktur

 |- 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

Das erstellte HD-CMPS wird in dist gespeichert
Die erstellten Debugging- und Dokumentationsseiten werden in lib gespeichert, das zum Anzeigen von Beispielen und Dokumentation für Benutzer verwendet wird.
Einige Skripte und Webpack-Konfigurationen werden im Build gespeichert
Der auf die Dokumentseite bezogene Code wird in Dokumenten gespeichert
Debugseitenbezogene Codes werden in Beispielen gespeichert (Komponentenbeispiele werden nicht gespeichert).
Pakete speichern Komponenten sowie Komponentendokumentation und Beispiele.
src speichert von Komponenten gemeinsam genutzten Code
static speichert statische Dateien, die beim Debuggen von Seiten verwendet werden (z. B. große JSON-Dateien).
Testfälle werden im Test gespeichert

So verwenden Sie die Komponentenbibliothek

Sie können das gesamte HD-CMPS oder bei Bedarf nur einige der Komponenten importieren.

Vollständige Einführung

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

Import auf Abruf (empfohlen)

Mit Hilfe der Babel-Plugin-Komponente können wir nur die erforderlichen Komponenten einführen, um die Größe des Projekts zu reduzieren.

Installieren Sie zuerst die babel-plugin-Komponente:

npm install babel-plugin-component -D

Ändern Sie dann .babelrc in:

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

Wenn Sie als Nächstes nur einige Komponenten wie HdSearch und HdTable einführen möchten, müssen Sie den folgenden Inhalt in main.js schreiben:

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