是時候著手搞一套屬於自己的vue元件庫啦！！！

ximoThorn發表於2020-08-06
Vue元件

基於vue(2.x)的一套中後臺ui框架，ui設計是基於element和iview的ui設計來做的

目前市面上充斥著各種優秀的vue元件庫，有沒有想過底層是怎麼實現的？對於一個成熟的元件庫，因為迭代版本已經很多次了，所以看那些組價庫的原始碼是極其痛苦的，Doran-ui迭代次數少，原始碼內部自認為難懂的地方都新增的有註釋，原始碼簡單易讀，是學習進步，瞭解底層知識的大好東西，值得去閱讀學習
github地址，歡迎大家start，另外有不懂或者發現bug的話，可以提issues，我看到的話會及時回覆的

注：因為沒有經過系統的測試和推廣，該ui目前僅供學習。

views目錄是各個元件的使用demo

git clone https://github.com/ximoThorn/Doran.git
cd Doran
npm i
npm run serve

線上預覽

全域性引入

一般在 webpack 入口頁面 main.js 中如下配置：


import  Vue  from  'vue'
import  DoranUi  from  'doran'
import  'doran/dist/doran.css'  // 引入css
import  App  from  './App.vue'

Vue.use(DoranUi)

new  Vue({
    render: h  =>  h(App),
}).$mount('#app')

按需引入

藉助外掛babel-plugin-import可以實現按需載入元件，減少檔案體積。首先安裝，並在專案根目錄檔案 .babelrc 中配置：


npm install babel-plugin-import --save-dev // 安裝

在.babelrc檔案中


{
    "plugins": [["import", {
        "libraryName": "doran",
        "libraryDirectory": "dist/components"
    }]]
}

然後這樣按需引入元件，就可以減小體積了：


<template>
    <div  id="app">
        <dr-button  type="error">Doran</dr-button>
        <dr-input  placeholder="請輸入"></dr-input>
    </div>
</template>
<script>
import { Button, Input } from  'doran'
export  default {
    name: 'App',
    components: {
        DrButton: Button,
        DrInput: Input
    }
}
</script>

注意：按需引用仍然需要匯入樣式，即在 main.js中全域性引入

Version

1.x

Completed components

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章