例項內容

封裝常見的功能元件（Button，Modal，Form相關），封裝完成後封裝成UI元件庫釋出到NPM上。

涉及知識點

• vue基礎語法
• 元件基本語法
• 字鍵通訊（sync，provide，inject）
• 插槽使用
• prop校驗
• 過渡與動畫處理
• 計算屬性與監聽屬性
• v-model語法糖
• vue外掛機制
• npm釋出

一、使用vue腳手架初始化一個專案

使用vue create one-ui，建立一個名為one-ui的專案。

按照自己的習慣設定腳手架風格，這裡不多做介紹。

腳手架搭建完畢後，將App.vue檔案下的自帶內容清理一下，為後續開發做準備。

二、如何封裝，註冊和使用一個元件
在componet下建立一個button.vue的檔案，放置button元件程式碼。建立一個組建的button元件，，並且指定name為oneButton。

<template>
  <button class="one-button">
   按鈕元件
  </button>
</template>
 
<script>
 
export default {
  name: 'oneButton'
}
 
</script>
 
<style lang="scss">
 
</style>

建立元件完成後，不能在專案中直接使用，需要到main.js中註冊才可以使用。

import Vue from 'vue'
import App from './App.vue'
// 第一步：匯入button元件
import OneButton from './components/button.vue'
 
Vue.config.productionTip = false
 
// 第二步：註冊元件,設定(元件名，元件)
Vue.component(OneButton.name, OneButton)
 
new Vue({
  render: h => h(App)
}).$mount('#app')
 

註冊完成後，元件就可以在專案中使用了。

<template>
  <div>
    <one-button></one-button>
  </div>
</template>

按鈕效果：

元件最簡單的封裝，註冊和使用方法就是這樣一個流程。

三、封裝一個element-ui風格的按鈕
需要使用到的知識：

1. 元件通訊
2. 元件插槽
3. props校驗

引數支援：

|引數名 |引數描述|引數型別|預設值 | header |
| ----------------- | ------ |---|---|
|type |按鈕型別（primary/success/warning/danger/info）|string |default|
|plain |是否是樸素按鈕 |boolean|false |
|round |是否是圓角按鈕| boolean |false|
|circle |是否是圓形按鈕| boolean|false |
|disabled|是否禁用按鈕|boolean |false |
|icon|圖示類名|string |無 |

事件支援：