第一个发布成功的UI组件库

创建一个vue2项目

npm install -g @vue/cli
vue create xiaoququ-ui
1
2

根目录下新建一个plugins文件夹，用来放组件

vue.config.js配置打包规则

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'src/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录
    // 新增一个 ~ 指向 plugins
    config.resolve.alias
      .set('~', path.resolve('plugins'))

    // 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/plugins/).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

编写组件

• qbutton/qbutton.vue 自定义颜色按钮

<template>
  <div>
    <h1 class="blue">你是二憨憨</h1>
    <button class="btn" :style="{ '--color': color, '--mixColor': mixColor }">按鈕</button>
  </div>
</template>
  
<script>

export default {
  name: 'qqButton',
  props: {
    color: {
      type: String,
      default: '#e83e8c'
    },
  },
  computed: {
    mixColor() {
      return this.getRgbNum(this.color, 0.1) // 透明色
    }
  },
  methods: {
    // 将#ccc#e83e8c转换成 rgb 颜色值[232,62,140]
    getRgbNum(sColor, percent) {
      if (sColor.length === 4) {
        let sColorNew = '#'
        for (let i = 1; i < 4; i += 1) {
          // 补全颜色值 例如：#eee,#fff等
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
        }
        sColor = sColorNew
      }
      // 处理六位颜色值
      let sColorChange = []
      for (let i = 1; i < 7; i += 2) {
        // 核心代码，通过parseInt将十六进制转为十进制，parseInt只有一个参数时是默认转为十进制的，第二个参数则是指定转为对应进制
        sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
      }
      // return sColorChange.join(',')
      return 'rgba(' + sColorChange.join(',') + ',' + percent + ')'
    },

  },
}
</script>
<style lang='scss' scoped>
$color: var(--color);

.btn {
  padding: 20px 40px;
  font-size: 30px;
  color: $color;
  // background: mix($color, #fff, 10%); // 报错
  background: var(--mixColor);
  border: 1px solid $color;
  border-radius: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

• qbutton/index.js

import qbutton from "./qbutton.vue";
qbutton.install = Vue => Vue.component(qbutton.name, qbutton); //注册组件
export default qbutton;
1
2
3

• plugins/index.js

//引入所有组件
import qinput from "./components/qinput/qinput.vue";
import qbutton from "./components/qbutton/qbutton.vue";

//所有组件列表
const components = [qinput, qbutton];

//定义install方法，Vue作为参数
const install = Vue => {
  //判断是否安装，安装过就不用继续执行
  if (install.installed) return;
  install.installed = true;
  //遍历注册所有组件
  components.map(component => Vue.component(component.name, component));
};

//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  //所有组件，必须具有install方法才能使用Vue.use()
  ...components
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

测试组件

• main.js

import ComponentBox from "../plugins/index";
Vue.use(ComponentBox)
1
2

• 首页 home.vue中直接使用组件

<template>
  <div>
    <qq-input></qq-input>
    <qq-button color="#2e93ff"></qq-button>
    <qq-button color="#ff976a"></qq-button>
    <qq-button color="#ee0a24"></qq-button>
    <qq-button color="#07c160"></qq-button>
    <qq-button color="#ccc"></qq-button>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10

打包配置

• package.json

{
  "name": "xiaoququ-ui", //组件库名字
  "version": "1.0.1",
  "private": false,
  "description": "第一个组件库",
  "author": "小曲曲",
  "license": "MIT",
  "keywords": [
    "小曲"
  ],
  "main": "dist/xiaoququ-ui.umd.min.js", //打包后dist文件夹的js文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xiaoququ-ui plugins/index.js", // 打包命令
    "lint": "vue-cli-service lint"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

发布到npm

• npm run lib 打包生成dist文件夹
  
• npm login 输入npm账号、密码（输不进去无所谓）、邮箱、验证码（发送邮箱）
• npm publish （发布失败检查是否包名重复）

使用组件库

• npm i xiaoququ-ui
• main.js

import ququ from "xiaoququ-ui";
import "xiaoququ-ui/dist/xiaoququ-ui.css";
Vue.use(ququ)
1
2
3

• 组件内使用

<qq-button color="#ccc"></qq-button>
1

遗留问题

• 公共样式没有打包到css文件中