当前位置：首页 > article >正文

npm发布组件（vue3+webpack）

article 2025/1/17 18:20:57

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>