Скачать hd cmps - скачать исходный код hd cmps

hd cmps

Другие категории

v2.0.2)

Скачать

HD-Cmps

Библиотека компонентов пользовательского интерфейса Hongdu --- на основе 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, которая используется для просмотра примеров и документации для пользователей.
Некоторые скрипты и конфигурации веб-пакета хранятся в сборке.
Код, связанный со страницей документа, хранится в документах.
Коды, связанные со страницами отладки, хранятся в примерах (примеры компонентов не сохраняются).
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-comment мы можем лишь ввести необходимые компоненты для уменьшения размера проекта.

Сначала установите компонент Babel-plugin:

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