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