基于vue2.x搭建组件库的流程-（一）-组件库搭建与发布流程

一，使用vue-cli搭建项目框架

电脑上没有安装vue的脚手架工具的，需要先行安装下：

npm install -g add @vue/cli

然后使用这个脚手架工具搭建基础的项目结构：

vue create biu-ui

选择基础的vue2.x，eslint，prettier。

项目的初始结构及修改方式如下：

值得注意的是，cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:

首先修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中.

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("/packages")
      .end()
      .use("babel")
      .loader("babel-loader");
  },
};

二，编写组件代码

这里采用Button作为范例：

如上图所示，在packages文件夹下创建Button相关文件。

//Button/src/index.vue
<template>
  <div class="x-button">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "x-button",
  props: {
    type: String,
  },
};
</script>

<style scoped>
.x-button {
  display: inline-block;
  padding: 3px 6px;
  background: #000;
  color: #fff;
}
</style>

然后在Button文件夹引入并导出这个组件：

//Button/index.js
// 导入组件，组件必须声明 name
import XButton from "./src";
// 为组件提供 install 安装方法，供按需引入
XButton.install = function (Vue) { 
   
  Vue.component(XButton.name, XButton);
};
// 导出组件
export default XButton;

最后在package文件夹设置index.js文件，将其中的所有组件导出（这里我用button和loading两个组件做示例）：

//package/index.js
// 导入button组件
import XButton from "./Button";
import BiuLoading from "./Loading";

// 组件列表
const components = [XButton, BiuLoading];

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) { 
   
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map((component) => Vue.component(component.name, component));
};
//这里export default是提供给全局引入使用
export default { 
   
  install,
  XButton,
  BiuLoading,
};
//这里export是提供给按需引入使用
export { 
    XButton, BiuLoading };

三，全局引入

因为项目的入口文件现在修改为examples文件夹下的main.js，所以需要这这里引入注册：

import Vue from "vue";
import App from "./App.vue";
// 导入组件库
import BiuUi from "../packages";
// 全局注册组件库，Vue.use()提供注册插件，插件对象需包含一个install函数。具体可查看官方文档
Vue.use(BiuUi);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");

这样一来，就可以在项目代码中直接使用：

//examples/app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <x-button type="primary">button</x-button>
    <biu-loading>测试另一个组件</biu-loading>
  </div>
</template>

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

<style></style>

全局引入的相关逻辑：

主要是利用了Vue.component()全局注册组件的方法和Vue.use()注册插件的方法。

四，按需引入

通常情况下，我们都是选择按需引入组件库，这样打出来的包不会过大。

//main.js
import Vue from "vue";
import App from "./App.vue";
// 导入组件库
import { 
    XButton, BiuLoading } from "../packages";
// 按需注册组件
Vue.use(XButton);
Vue.use(BiuLoading);
Vue.config.productionTip = false;

new Vue({ 
   
  render: (h) => h(App),
}).$mount("#app");

按需引入的实现逻辑：

五，引入注册后组件的使用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <x-button type="primary">button</x-button>
    <biu-loading>测试另一个组件</biu-loading>
  </div>
</template>

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

<style></style>

实现的效果：

六，修改package.json，为发布npm包做准备

首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下这部分配置可以参考vue-cli的配置文档：构建目标 | Vue CLI (vuejs.org)：

 "scripts": { 
   
    "lib": "vue-cli-service build --name xiaobiu_ui --target lib --dest lib ./packages/index.js"
  },

还有一些其他的配置：

description 组件库的描述文本
keywords 组件库的关键词
license 许可协议
repository 组件库关联的git仓库地址
homepage 组件库展示的首页地址
main 组件库的主入口地址(在使用组件时引入的地址)
private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库

我的设置：

{ 
   
  "name": "xiaobiu-ui",
  "version": "0.1.0",
  "main":"./lib/xiaobiu_ui.umd.js",
  "private":false,
  "license": "ISC" ,
  "scripts": { 
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --name xiaobiu_ui --target lib --dest lib ./packages/index.js"
  },
  "dependencies": { 
   
    ...
  },
  "devDependencies": { 
   
    ...
  },
  ...//其他配置
}

主要需要注意的是private需要没有或者是false。另外就是这个main，它设置了这个组件库打包之后的入口文件，现在我还不知道是这个值（先写上），等会npm run lib之后就会看到了。

接下来需要配置.npmignore，配置文件类似于 .gitignore 文件，如果没有 .npmignore，会使用.gitignore来取代他的功能。利用它筛选掉没用的代码。

/examples/
/node_modules/
/packages/

七，打包并发布npm

// 本地编译组件库代码
npm run lib

就会看到打包出来的文件了，在浏览器打开可以看到：

这时候，我们已经正确地把包打出来了，因为第一次我们不知道打出来的包地入口文件是啥，这时才知道，所以需要修改package.json中地main值（上文我是预先修改了）。再npm run lib一次。

接下来需要把包发布到npm上：

// 登录
 npm login
 // 发布
 npm publish
 // 如果发布失败提示权限问题,请执行以下命令
 npm publish --access public

此后，有所变更的话，需要更新version之后才能发新的npm包。

登录npm可以看到，已经正确发布npm包：

八，第三方用户下载使用

[注意]：因为本文是vue2的所，所以只支持vue2。

先下载安装：

npm install xiaobiu_ui --sava--dev

再在项目中引入使用：

import xiaobiu from 'xiaobiu_ui'
import 'xiaobiu_ui/lib/xiaobiu_ui.css'
Vue.use(xiaobiu)

页面代码中使用：

  <x-button type="primary">button</x-button>
  <biu-loading>测试另一个组件</biu-loading>