3.組件庫

1.製作 vue 的插件

假設寫了很多的組件，我們希望將其作爲 vue 的插件打包。

首先需在組件文件默認導出組件 name 屬性，組件的 name 屬性是作爲註冊組件的第一個參數。

<script>
  export default {
    name: 'my-button'
  }
</script>

同文件夾新建index.js 文件引入組件。爲了做成插件應該導出一個 install 方法。

請閱讀 Vue.js 文檔https://cn.vuejs.org/v2/guide/plugins.html

import myButton from './my-button.vue'
var components = [myButton]
var install = function (Vue) {
  components.forEach((item) => {
    Vue.component(item.name, item)
  })
}
export default {
  install
}

# 知識點：

ES6 的知識點請閱讀 http://caibaojian.com/es6/README_about.html

• ES6 模塊系統 import 和 export default 命令。
• forEach()方法參數是一個回調函數，用於調用數組的每個元素，並將元素傳遞給回調函數。
• 回調函數採用 ES6語法 箭頭函數 （item) => Vue.component(item.name, item)。
• install 這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。

測試下是否可以使用，在 main.js 文件導入組件

import components from './components'
Vue.use(components)

2.打包組件

將組件構建成組件庫，請閱讀https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

在 package.json 文件中添加 npm 腳本命令

{
  "scripts": {
    "lib": "vue-cli-service build --target lib src/components/index.js"
  }
}

現在可以使用腳本命令構件組件庫

npm lib