从零开始，学会在npm发布VueUI组件库

置顶 zhengvipin

已于 2022-06-10 08:59:40 修改

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签： vue npm webpack elementui

于 2022-06-08 18:35:42 首次发布

本文链接：https://blog.csdn.net/zhengvipin/article/details/125187489

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文详细介绍了如何从零开始创建一个基于Vue的组件库，包括使用VueCLI初始化项目，配置scss预处理，编写及打包组件，发布到npm，以及在其他项目中测试组件的完整过程。通过实例展示了组件的编写、样式定制、打包配置和npm发布等关键步骤，适合前端开发者学习组件库的构建技巧。

摘要由CSDN通过智能技术生成

一、准备项目

1.1 使用VueCLI命令行创建一个vue项目，预设选择默认：Default ([Vue 2] babel, eslint)

vue create vp-ui-vue

1.2 项目创建成功后，进入项目根目录，下载依赖

npm install

1.3 组件的CSS一般采用scss、less、stylus等预处理语言来编写，这里选择scss作为演示，故需要额外下载sass相关依赖

npm install sass-loader sass --save-dev

1.4 运行项目，测试环境是否正常。

1.4.1 运行失败：如果运行报错Syntax Error: TypeError: this.getOptions is not a function，一般就是sass-loader版本太高了，安装低版本即可

npm install sass-loader@8.0.2 --save-dev

1.4.2 运行成功，此时项目目录结构如下：

二、编写组件

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

这里为了演示，直接复用了 element-ui 的卡片组件、collapse 展开折叠组件的代码，并在此基础上做了简单修改。

// packages/card/src/main.vue

<template>
  <div
    class="vp-card"
    :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"
  >
    <div class="vp-card__header" v-if="$slots.header || header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="vp-card__body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "VpCard",
  props: {
    header: {},
    bodyStyle: {},
    shadow: {
      type: String,
    },
  },
};
</script>

// packages/card/index.js

import Card from './src/main';

/* istanbul ignore next */
Card.install = function(Vue) {
  Vue.component(Card.name, Card);
};

export default Card;

// packages/index.js

import CollapseTransition from './collapse-transition/index';
import Card from './card/index';

const components = [
    CollapseTransition,
    Card
];

const install = function (Vue, opts = {}) {

    components.forEach(component => {
        Vue.component(component.name, component);
    });

    Vue.prototype.$VP = {
        size: opts.size || '',
        zIndex: opts.zIndex || 2000
    };
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    version: '0.0.1',
    install,
    CollapseTransition,
    Card
};

2.2 在assets目录下创建 theme-chalk目录，编写上述组件对应的样式，并统一引入到index.scss

// assets/theme-chalk/card.scss

.vp-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;

  &.is-always-shadow,
  &.is-hover-shadow:focus,
  &.is-hover-shadow:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  &__header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  &__body {
    padding: 0 20px;
  }
}

// assets/theme/thalk/index.scss

@import "./collapse-transition.scss";
@import "./card.scss";

2.3 组件编写完后，此时目录结构如下：

三、打包组件

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

    "lib": "vue-cli-service build --target lib --name vp-ui-vue --dest lib ./src/packages/index.js && npm run build:css",
    "build:css": "sass ./src/assets/theme-chalk/index.scss ./lib/theme-chalk/index.css --no-source-map"

3.2 运行打包命令

npm run lib

3.3 打包成功后目录结构如下

四、发布组件

4.1 修改package.json文件：

将private属性设置为false，表明允许发包
调整version属性，指定版本号
添加main属性，指定引用依赖时的入口文件
添加files属性，指定发包后被包含的文件名数组

// package.json

{
  "name": "vp-ui-vue",
  "version": "0.1.2",
  "private": false,
  "main": "lib/vp-ui-vue.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name vp-ui-vue --dest lib ./src/packages/index.js && npm run build:css",
    "build:css": "sass ./src/assets/theme-chalk/index.scss ./lib/theme-chalk/index.css --no-source-map"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.52.2",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "files": [
    "package.json",
    "lib"
  ],
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

4.2 登录npm账号，没有的话，先去npm官网注册一个

这里注意npm源要指向：https://registry.npmjs.org/

npm login

4.3 登录成功后，运行npm发包命令

这里注意包名是否在npm仓库上已存在

npm publish

4.4 发包成功了，登录npm官网就可以搜索到刚才发布的组件库了：vp-ui-vue

五、测试组件

5.1 从npm下载上传的组件库，测试下实际是否可用

npm install vp-ui-vue

5.2 项目引入组件库

import VpUI from 'vp-ui-vue'
import 'vp-ui-vue/lib/theme-chalk/index.css'
Vue.use(VpUI);

5.3 页面简单测试

<template>
  <vp-card class="box-card">
    <div slot="header" class="card-header">
      <span>卡片名称</span>
      <button class="card-header--trigger" @click.stop="show = !show">
        {{ show ? "收缩" : "展开" }}面板
      </button>
    </div>
    <vp-collapse-transition>
      <div v-show="show" class="card-body">
        <div v-for="o in 4" :key="o" class="text item">
          {{ "列表内容 " + o }}
        </div>
      </div>
    </vp-collapse-transition>
  </vp-card>
</template>

<script>
export default {
  data: function () {
    return {
      show: true,
    };
  },
};
</script>

<style lang="scss" scoped>
.card-header {
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }

  &--trigger {
    float: right;
    padding: 3px 0;
    color: #409eff;
    border: none;
    background: none;
    cursor: pointer;
  }
}

.card-body {
  padding: 20px 0;
}
</style>

5.4 效果如下，演示正常，感谢观看，完结撒花！