一、新建vue項目

新建一個vue項目，并依賴于element-ui

二、開發vue組件

1. 創建組件：WiiUpload.vue

<template>
  <div
    style="
      line-height: 40px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    "
  >
    文件上傳
  </div>
</template>

<script>
export default {
  name: "WiiUpload",
  data() {
    return {};
  },
};
</script>

在data中一定要返回一個object，否則會報一下錯誤；

image.png

2. 創建組件入口文件：index.js

// 引入分頁組件文件
import WiiUpload from "./WiiUpload.vue"

const coms = [WiiUpload]; // 將來如果有其它組件,都可以寫到這個數組里

// 批量組件注冊
const install = function (Vue) {
    coms.forEach((com) => {
        Vue.component(com.name, com);
    });
};
export default install; // 這個方法以后再使用的時候可以被use調用

三、npm打包

1. 配置package.json

此package.json是項目的package.json文件，不是npm包的package.json文件

配置打包命令：
在scripts中新加一條打包命令：

"package": "vue-cli-service build --target lib ./src/components/index.js --name wii-upload --dest wii-upload"

命令參數如下：

• --target lib：打包的初始文件
• --name：打包后的文件名字
• --dest：打包后的文件夾名稱

2. 打包

運行命令打包：npm run package

3. 查看打包后的文件

四、發布

1. 創建package.json文件

在打包后的目錄下創建package.json

image.png

2. 編輯package.json

修改參數：main

3. 發包

命令：npm publish

五、使用該組件

1. 安裝該組件

npm install wii-upload

2. 在main.js中注冊該組件

import WIIUpload from "wii-upload";
Vue.use(WIIUpload)

3. 在代碼中使用該組件

這里用到的組件名WiiUpload就是上方開發組件時，設置的組件name