1. 首页
  2. 前端

从0到1制作并发布打造一个属于自己的vue组件库详细配置过程

关于组件库的制作过程,这里就用我自己封装的组件库为例,由于组件库的制作对于目录结构没有特殊要求,为了能更清晰的介绍,这里就参考elementui的目录结构。

首先我们使用”npm create vfan-ui”初始化一个项目。我们可以把src文件夹重命名成examples,专门用来存放测试的例子,此目录不是组件库的组成部分,不是必须的,可以不要。

再新建一个packages文件夹专门存放组件库相关的内容。这时,由于修改了项目默认的入口文件结构,导致项目就无法启动了,我们按照以下步骤操作即可。

一、packages处理成插件

1.新建一个vue.config.js文件,然后在该文件里面修改项目的入口文件,和指定babel的编译目录,具体配置和介绍如下:

vue.config.js文件:

const path = require("path");
module.exports = {
  pages: {
    index: {
      // 修改项目的入口文件
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  },
  // 扩展 webpack 配置,使 packages 加入编译
  chainWebpack: config => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap(options => {
        // 修改它的选项...
        return options;
      });
  }
};

这时项目就可以运行了。

2.接下来我们开始在packages文件夹里开发一个个组件。将来需要打包的组件、字体文件、图片和样式文件等都需要放到packages文件夹下。

3.在packages目录里面新建index.js文件,作为整个包的入口,代码示例如下:

// 整个包的入口
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
// 统一导出
// 导入颜色选择器组件
import VButton from "./button";
import VCard from "./card";
import "./theme/index.scss";

// 存储组件列表
const components = [VButton,VCard];
const install = function(Vue) {
  // 全局注册所有的组件
  components.forEach(item => {
    Vue.component(item.name, item);
  });
  // 指令
  Vue.use(vueDrag);
};

// 判断是否是直接引入文件,如果是,就不用调用 Vue.use()
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install
};

4.然后在项目的examples中的main.js里直接引入进行测试。

import VfanUI from "./../packages/";
import "./../packages/theme/index.scss";
Vue.use(VfanUI);

关于install和use的使用请参阅https://cn.vuejs.org/v2/api/#Vue-use

二、Vue组件库的制作

我们需要将上面的vue插件制作成vue组件库,还需要做如下配置。

1、在package.json中的scripts对象中添加如下代码:

"lib": "vue-cli-service build --target lib packages/index.js"

关于构建组件库配置详细见https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93

2.发布到npm前,还要修改package.json文件,保证四点如下:

  "name": "vfan-ui",
  "version": "0.1.2",
  "private": false,
  "main":"dist/vfan-ui.umd.min.js"
  • 首先要把”private”改为false,私有的包npm是无法通过上传的
  • name名在npm上必须唯一
  • 同name下的version版本号不能重复
  • 还需要加上“main”,并指定包的入口文件

3.然后执行npm run lib

执行成功后就会多出一个dist文件夹,该文件夹就是打包成功的组件库,将来使用组件库时只需要dist里面的文件即可,而dist中的vfan-ui.umd.min.js文件和vfan-ui.css将是我们使用的文件,只需要把dist文件夹发布到npm即可。

4.在npm上发布包时只需要上传编译的dist文件夹,不需要把自己的整个组件库源码上传上去,所以发布前还需要增加.npmignore文件,来忽略不需要上传的内容,只需要上传dist目录即可,将来用户安装时,包中只有dist目录文件即可,例如:

#	忽略目录
examples/
packages/
public/
tests/

# 忽略指定文件
vue.config.js
babel.config.js
cypress.json
package.json
*.map
.browserslistrc
.eslintrc.js

以上配置完成后就可以开始往npm上发布了,具体步骤如下:

  1. 如果有对组件库有新的修改,需要重新执行npm run lib对组件库进行打包,如果没有修改,则可忽略该步骤。
  2. 执行npm login ,然后输入用户名、密码和邮箱来登录npm
  3. 登录成功后,执行npm publish等待完成,即可发布成功

接下来我们就可以在其他项目中安装和使用了。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1706

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code