تنزيل hd cmps - تنزيل كود المصدر hd cmps

hd cmps

فئات أخرى

v2.0.2)

تنزيل

HD-CMPS

مكتبة مكونات 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، والذي يُستخدم لعرض الأمثلة والوثائق للمستخدمين.
يتم تخزين بعض البرامج النصية وتكوينات حزمة الويب في ملف build.gradle
يتم تخزين التعليمات البرمجية ذات الصلة بصفحة المستند في المستندات
يتم تخزين الرموز المتعلقة بصفحة تصحيح الأخطاء في الأمثلة (لا يتم تخزين أمثلة المكونات)
تقوم الحزم بتخزين المكونات، بالإضافة إلى وثائق وأمثلة المكونات.
يقوم src بتخزين التعليمات البرمجية المشتركة بين المكونات
يخزن الثابت الملفات الثابتة المستخدمة في صفحات تصحيح الأخطاء (مثل ملفات 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:

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