shards vue

Shards Vue เป็นชุด Vue.js ui ฟรีที่สวยงามและทันสมัย
ขึ้นอยู่กับเศษ

เอกสารและการสาธิต • หน้าอย่างเป็นทางการ

เริ่มต้น

การเริ่มต้นใช้งาน Shards Vue นั้นค่อนข้างง่าย คุณสามารถดาวน์โหลด Shards Vue ผ่านเว็บไซต์อย่างเป็นทางการได้ที่นี่บน GitHub เป็นแพ็คเกจรุ่นหรือโดยใช้ผู้จัดการแพ็คเกจเช่นเส้นด้ายหรือ NPM

• เว็บไซต์ทางการ
• แพ็คเกจปล่อย

เริ่มต้นอย่างรวดเร็ว

คุณสามารถติดตั้ง Shards Vue ผ่านเส้นด้ายหรือ NPM

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

Bundlers โมดูล

หากคุณใช้ชุดโมดูล Bundler เช่น Webpack หรือ Rollup คุณสามารถรวมไลบรารี Vue ทั้งหมดไว้ในโครงการของคุณ

 import Vue from 'vue'
import ShardsVue from 'shards-vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

Vue . use ( ShardsVue ) ;

ส่วนประกอบที่ลงทะเบียนเป็นปลั๊กอิน Vue

หากคุณต้องการลงทะเบียนเฉพาะส่วนประกอบบางอย่างเป็นปลั๊กอิน VUE ตรวจสอบให้แน่ใจว่าได้นำเข้าส่วนประกอบที่คุณต้องการใช้

 import Vue from 'vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

import { Button } from 'shards-vue/src/components'
Vue . use ( Button )

การนำเข้าส่วนประกอบไฟล์เดียว

การนำเข้าส่วนประกอบไฟล์เดียวก็เป็นไปได้เช่นกัน

< template >
    < d-button @click = " handleClick " >Click Me!</ d-button >
</ template >

< script >
import dButton from ' shards-vue/src/components/button/Button '

export default {
    components : {
        dButton
    },
    methods : {
        handleClick () {
            alert ( ' You just clicked me! ' )
        }
    }
}
</ script >

ขนาดไฟล์

นอกจากนี้คุณยังสามารถเรียกใช้ yarn bundlesize ได้ตลอดเวลาเพื่อตรวจสอบขนาดไฟล์ที่รวบรวม

ชื่อไฟล์	ขนาด (min.gz)
Shards-vue.common.min.js	46.29KB
Shards-vue.esm.min.js	46.24KB
Shards-vue.umd.min.js	39.3KB

สร้างขึ้นโดยใช้

• ชุด UI Shards
• Nouislider โดยLéon Gersen (ใบอนุญาต WTFPL)
• Vuejs-datepicker

การบริจาค

โปรดอ่านรายละเอียดเกี่ยวกับจรรยาบรรณของเราและกระบวนการในการส่งคำขอดึงให้เรา

หากคุณต้องการแก้ไขข้อผิดพลาดหรือทำงานบนคุณสมบัติตรวจสอบให้แน่ใจว่าได้ทำตามขั้นตอนด้านล่างเพื่อตั้งค่าสภาพแวดล้อมการพัฒนาบนเครื่องท้องถิ่นของคุณ:

1. โคลนที่เก็บ
2. เรียกใช้ yarn เพื่อติดตั้งการพึ่งพาที่จำเป็นทั้งหมด
3. ติดตั้ง Vue CLI และบริการ CLI ทั่วโลกโดยใช้งาน: npm i -g @vue/cli @vue/cli-service-global หรือ yarn global add @vue/cli-service-global
4. เรียกใช้ yarn watch เพื่อเริ่มต้นเซิร์ฟเวอร์และเรียกใช้ Sandbox ด้วยการโหลดซ้ำ
5. อ้างถึงไฟล์ sandbox/Sandbox.vue สำหรับรายละเอียดเพิ่มเติม

แผนงาน

ดูแผนงาน

การเปลี่ยนแปลง

ดูการเปลี่ยนแปลงที่โดดเด่น