> 作者：麥樂

# 新建專案

初始化一個vue專案

src下面建立一個plugins資料夾，index.js檔案，這個檔案是元件的出口檔案。

```bash
npm install @/vue-cli -g

npm create vue-components

cd vue-components

npm run serve
```

## 建立元件庫

src下新建一個plugins資料夾

然後建立toast元件toast/index.vue

這裡為了能夠展示模版，div標籤後面的>去掉了。

```html
<template>
  <div class="hello" :class="{active: toastStatus}">
 
<div>
export default {
  name: 'vue-toast',
  data() {
    return {
      toastStatus: false,
      text:''
    }
  },
  methods: {
    handlerToast(toastInfo,time) {
      this.text = toastInfo;
      this.toastStatus = true;
      time = time || 2000
      setTimeout(() => {
        this.toastStatus = false;
      }, time)
    }
  },
}
</div>
 

<style scoped="">
    .toast {
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%, 50%);
        min-width: 0px;
        min-height: 0;
        table-layout: center;
        background: rgba(0,0,0,0.5);
        display: none
 
    }
    .active {
        display: block
    }
 
</style>
```

再建立一個button元件button/index.vue

```
<template>
  <div class="hello">
 
</div>
                                        <p style="clear:both;"></p>
                    <p class="translate">
                                                    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/70001864/viewspace-2884866/，如需轉載，請註明出處，否則將追究法律責任。
                                            </p>

</template></div>
            </template>

實現一個vue元件庫釋出到npm

相關文章