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

javascript 复制代码
// 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;
javascript 复制代码
<!-- 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>
javascript 复制代码
<!-- 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.本地测试

javascript 复制代码
<!-- 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.打包

javascript 复制代码
 "package": "vue-cli-service build --target lib ./src/package/index.js --name wlz-component-ui --dest wlz-component-ui"
javascript 复制代码
npm run package

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

javascript 复制代码
cd .\wlz-component-ui\
javascript 复制代码
npm init -y
javascript 复制代码
{
  "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组件库"
}
javascript 复制代码
npm adduser

按回车登录

发布

javascript 复制代码
npm publish

7使用

javascript 复制代码
npm i wlz-component-ui
javascript 复制代码
// 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");
javascript 复制代码
<!-- 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>
相关推荐
m0_5287238111 分钟前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer12 分钟前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL17 分钟前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树18 分钟前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
贵州数擎科技有限公司40 分钟前
使用 Three.js 实现流光特效
前端·webgl
JustHappy42 分钟前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪1 小时前
刷刷题16
前端·javascript·面试
祈澈菇凉2 小时前
如何结合使用thread-loader和cache-loader以获得最佳效果?
前端
垣宇2 小时前
Vite 和 Webpack 的区别和选择
前端·webpack·node.js
java1234_小锋2 小时前
一周学会Flask3 Python Web开发-客户端状态信息Cookie以及加密
前端·python·flask·flask3