快捷導(dǎo)航

vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)

更新時間：2025年01月17日 09:26:39 作者：itwlz

本文主要介紹了vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.初始化Vue項(xiàng)目

vue create my-app

2.本地運(yùn)行

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.發(fā)布(注意！！要進(jìn)入新生成的目錄操作即：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

按回車登錄

發(fā)布

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>

到此這篇關(guān)于vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 webpack npm發(fā)布組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: