npm发布组件（vue3+webpack）

1.初始化Vue项目

vue create my-app

2.本地运行

npm run serve

3.新增目录和文件

1. src/package/index.js

2. src/package/wlz-btn/index.vue
3. src/package/wlz-input/index.vue

// src\package\index.js
import WlzBtn from "./wlz-btn";
import WlzInput from "./wlz-input";const componentList = [WlzBtn, WlzInput];const install = function (Vue) {componentList.forEach((com) => {Vue.component(com.name, com);});
};export default install;

<!-- src\package\wlz-btn\index.vue -->
<template><button class="wlz-btn">你好呀</button>
</template><script>
export default {name: "WlzBtn",
};
</script><style scoped>
.wlz-btn {background-color: #4caf50;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}
</style>

<!-- src\package\wlz-input\index.vue -->
<template><input type="text" class="wlz-input" />
</template><script>
export default {name: "WlzInput",
};
</script><style scoped>
.wlz-input {padding: 10px;border: 1px solid red;border-radius: 4px;box-sizing: border-box;
}
</style>

4.本地测试

<!-- src\App.vue -->
<template><div><p>111</p><WlzBtn /><WlzInput /><p>222</p></div>
</template><script>
import WlzBtn from "@/package/wlz-btn";
import WlzInput from "@/package/wlz-input";export default {name: "App",components: {WlzBtn,WlzInput,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

5.打包

 "package": "vue-cli-service build --target lib ./src/package/index.js --name wlz-component-ui --dest wlz-component-ui"

npm run package

6.发布(注意！！要进入新生成的目录操作即：wlz-component-ui)

cd .\wlz-component-ui\

npm init -y

{"name": "wlz-ui","version": "1.0.0","main": "wlz-ui.common.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","description": "我的ui组件库"
}

npm adduser

按回车登录

发布

npm publish

7使用

npm i wlz-component-ui

// src\main.js
import { createApp } from "vue";
import App from "./App.vue";
import WlzComponentUI from "wlz-component-ui";
import "wlz-component-ui/wlz-component-ui.css";const app = createApp(App);
app.use(WlzComponentUI);app.mount("#app");

<!-- src\App.vue -->
<template><div><p>1111</p><WlzBtn /><WlzInput /><p>222</p></div>
</template><script>
export default {name: "App",
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>