基于vue-cli3构建自己的UI库

---

前言

github：https://github.com/Dream-wu/mj-ui

知识基础：

• vue基础语法、过渡与动画处理
• 组件思想
• vue-cli项目结构
• npm发布流程
  

---

一、创建项目

# CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令,需本地安装
vue create mj-ui    
npm i
yarn serve

选择项目配置：vue2 、sass

这样就快速创建了一个项目，编写UI库源码

二、编写组件

编写组件前，一定要大致列好组件的框架，从几方面去考虑：

• props： 入参属性，格式校验，默认值
• event：向父组件输出的事件
• slot：是否支持插槽，以及个数和位置
• 动画效果

在src/components文件夹下创建UI组件文件，例如button组件 button.vue(参考element-ui)

1.button组件

代码如下（示例）：

<template>
  <button class="mj-button" :class="[`mj-button--${type}`, {
    'is-plain': plain,
    'is-round': round,
    'is-circle': circle,
    'is-disabled': disabled
    }]" @click="handleClick"
    :disabled="disabled"
    type="button">
    <i :class="icon" v-if="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: 'MjButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.mj-button {...}
</style>

2.引入字体图标icon文件

在button组件和其他组件中需要图标支持,这里是拿的element-ui的字体图标文件，在icon.scss文件中修改font-family名称为mj-icons

@font-face {
  font-family: 'mj-icons';
  src: url('fonts/mj-icons.woff') format('woff'), /* chrome, firefox */
       url('fonts/mj-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  font-weight: normal;
  font-style: normal;
}

[class^="mj-icon-"], [class*=" mj-icon-"] {
	font-family: 'mj-icons' !important;
	// ....
}

3.引入Button组件看效果

在scr/main.js中引入组件和样式，并全局注册：

import Vue from 'vue'
import App from './App.vue'
import MjButton from './components/button.vue'
import './assets/index.scss'  //内部引入了字体图标和其他样式文件

Vue.component(MjButton.name, MjButton)
new Vue({
  render: h => h(App)
}).$mount('#app')

在src/App.vue中使用组件，测试效果：

<template>
	<div id="app">
    	<mj-button>按钮</mj-button>
    	<mj-button type="primary">按钮</mj-button>
    	<mj-button type="info">按钮</mj-button>
    	<mj-button type="success">按钮</mj-button>
    	<mj-button type="warning">按钮</mj-button>
   	 	<mj-button type="danger">按钮</mj-button>
   </div>
</template>

打开看效果：

依照此步骤，可以继续封装其他组件，例如：radio,switch,form,…等。没有思路的可以去参考其他组件库

三、修改目录结构

为了看起来更像一个组件库，调整一下目录结构

1. packages文件夹

• 根目录下，新建packages文件夹用于存放用于打包组件库的文件（组件和样式），将之前src/components下的所有组件挪到packages下，以及所有样式图标文件。
• 在packages下，新建index.js，index.js作为该UI库的入口文件。该UI库作为vue的一个插件，必须提供install方法。在install方法内全局注册上所有组件

// packages/index.js
import MjButton from './button.vue'
import MjDialog from './dialog.vue'
import './assets/index.scss'

const components = [
  MjButton,
  MjDialog
]
// 整个包的入口 ，注册所有组件
const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

// 判定是否是直接引入文件(比如script引入，全局能拿到Vue变量)，如果是，就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default install

2. 打包修改

• 新建vue.config.js，修改打包规则，只打包packages文件夹。

// 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
            })
    }
}

• 新增打包命令："lib": "vue-cli-service build --target lib packages/index.js" vue-cli默认打包成应用的方式，这里要打包成一个库，需重新配置lib方式，并指定打包入口文件
• 打包后会生成dist目录，内有commonjs umd不同格式的js文件

2. demo展示

将原来的src文件夹重新命名为examples，主要用于组件库的demo实例展示，同时在main.js去掉对组件的全局注册，直接引入packages中的UI库。

// examples/main.js 
import MjUI from '../packages'

Vue.use(MjUI)

四、将UI库部署到npm上

部署到npm上，就可以实现云管理，在项目中直接引入npm包即可。那传到npm上，需要做一些修改：

• package.json中的"private": false,必须为false才能部署成功
• package.json中的name值，不能重名的。可以在npm网站上搜一下有没有重名的库。
• package.json配置入口文件："main": “dist/mj-ui.umd.min.js”
• 新建一个.npmignore文件，配置忽略上传的文件,这里只需要dist目录即可

# 忽略目录,npm上不需要上传源码，只需要dist即可
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

• 切记，npm命令设置的镜像源必须是自己的。不要配置淘宝等其他的源，查看当前设置的镜像：npm config get registry
• npm login 命令输入用户名和密码，登录
• npm publish 命令就可以发布（每次重新发布要更改version，否则会失败）

五、项目使用自己的UI库

像引用其他插件库一样：

yarn add mj-ui-vue

import MjUI from 'mj-ui-vue'
import 'mj-ui-vue/dist/mj-ui.css'

Vue.use(MjUI)

---

总结

封装一个UI库的步骤大致如上，关键在于一个一个的组件是如何封装的，这需要我们开发人员的不断学习和总结。