npm发布包

在 npm 发布 VueUI 组件库

blog.csdn.net/zhengvipin/…

创建 vue 项目

npm install -g @vue/cli
vue create wmy-ui

编写组件并以插件方式导出

在 src 目录下创建 packages 目录，随便编写个vue组件，并统一引入到 src/packages/index.js

//src/packages/Button/index.vue
<template>
  <div>
    <button class="my-button">我是一个封装的button组件</button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
};
</script>

<style scoped>
.my-button {
  background-color: yellowgreen;
}
</style>


// src/packages/index.js
import Button from "./Button/index.vue";
const components = [Button];
const install = function (Vue, opts = {}) {
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  Button,
};

打包组件

• 在 package.json 的 scripts 标签中添加自定义命令

// 1. vue-cli-service build 构成命令
// 2. --target lib --name wmy-ui 构建目标为一个库，产物的命名以wmy-ui命名
// 3. --dest lib ./src/packages/index.js 以 ./src/packages/index.js 为源文件构建的产物的存放在根目录的lib目录下

"lib": "vue-cli-service build --target lib --name wmy-ui --dest lib ./src/packages/index.js && npm run build:css",

• npm run lib, 构建产物为 lib/wmy-ui.common.js lib/wmy-ui.css 等

发布产物

• 1.修改 package.json 文件： 将 private 属性设置为 false，表明允许发包 调整 version 属性，指定版本号 添加 main 属性，指定引用依赖时的入口文件（import 的关联文件） 添加 files 属性，指定发包后被包含的文件名数组(npm 上 code 含有的文件)

{
  "name": "wmy-ui",
  "version": "2.1.0",
  "private": false,
  "main": "lib/wmy-ui.common.js",
  "files": [
    "package.json",
    "lib"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name my-ui --dest lib ./src/packages/index.js"
  },
}

• 2. 去 registry.npmjs.org 注册登录账号
• 3. npm config set registry registry.npmjs.org/
• 4. npm login 按照提示输入账号密码，以及注册邮箱收到的验证码
• 5. npm publish（这里注意包名是否在 npm 仓库上已存在）
• 6. 登录 npm 官网就可以搜索到刚才发布的组件库了 wmy-ui

测试组件

• 下载包

npm install wmy-ui

• 项目入口文件 main.js 引入下载成功的包

import MyUI from "wmy-ui";
import "wmy-ui/lib/wmy-ui.css";

Vue.use(MyUI);

• 页面测试

<template>
  <div class="app">
    <MyButton />
  </div>
</template>

如要更新公用组件，可以再修改 package.json 中的 version 再次构建再次发布，这时 npm 上就会有对应的多个版本库；使用方按需下载对应版本即可

这篇好文章是转载于：学新通技术网