npm包（二）vue组件

一、新建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