搭建自己的vue组件库

目录配置

直接使用vue create {name}创建项目，然后对生成的目录做以下修改

1. 把src文件夹修改为examples（组件编写好在这里引入测试）
2. 添加vue.config.js修改启动配置

    module.exports = {
      pages: {
        index: {
          entry: 'examples/main.js',
          template: 'public/index.html',
          filename: 'index.html'
        }
      }
    }

3.创建packages问件夹存放组件

|-- my-ui
    ├─.browserslistrc
    ├─.eslintrc.js
    ├─babel.config.js
    ├─package.json
    ├─README.md
    ├─vue.config.js
    ├─yarn.lock
    ├─public
    |   ├─favicon.ico
    |   └index.html
    ├─packages     //存放组件
    |    ├─index.js
    |    ├─Input
    |    |   ├─index.js
    |    |   ├─src
    |    |   |  └index.vue
    |    ├─Button
    |    |   ├─index.js
    |    |   ├─src
    |    |   |  └index.vue
    ├─examples    //src 改为examples业务代码
    |    ├─App.vue
    |    ├─main.js
    |    ├─views
    |    |   ├─About.vue
    |    |   └Home.vue
    |    ├─router
    |    |   └index.js
    |    ├─components
    |    |     └HelloWorld.vue
    |    ├─assets
    |    |   └logo.png
    ├─build
    |   └webpack.component.js //打包配置

组件编写测试

packages/Button/src/index.vue

<template>
  <div class="x-button">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'XButton',
  props: {
    type: String
  }
}
</script>

<style>
.x-button {
  display: inline-block;
  min-width: 68px;
  padding: 6px 10px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
  background: #409eff;
  border: 1px solid #409eff;
  color: #fff;
  cursor: pointer;
}
</style>

组件编写完成之后,想要引入并使用Vue.use注册需升级为Vue插件。 官网是这样介绍的查看文档

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

packages/Button/index.js // 导入组件，组件必须声明 name import Button from './src/index.vue'

// 导入组件
import Button from './src/index.vue'


// 为组件提供 install 安装方法
Button.install = function (Vue) {
  Vue.component(Button.name, Button)
}

// 导出组件
export default Button

测试组件

examples/main.js

import Vue from 'vue'
import App from './App.vue'
import Button from '../packages/Button'
Vue.use(Button)

Vue.config.productionTip = false

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

打包

到目前为止，组件的开发大概就是按照这个流程。 但是组件使用应该支持单个引入，也应该支持全局引入，才能方便使用。 packages/index.js

// 导入所有组件
import XButton from './Button'
import XInput from './Input'

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

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

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  XButton,
  XInput
}

安装打包依赖：

yarn add webpack-cli mini-css-extract-plugin clean-webpack-plugin -D

注意问题：如果使用的是webpack4的版本，mini-css-extract-plugin应该使用1.6及以下版本。

build/webpack.component.js

const {
  VueLoaderPlugin
} = require('vue-loader')
const path = require('path');
const glob = require('glob');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin') //打包前先清理
const MiniCssExtractPlugin = require('mini-css-extract-plugin') //把组件中的样式分离成单个样式文件
const list = {}
async function makeList(dirPath, list) {  
  const files = glob.sync(`packages/**/index.js`) //获取所有的组件
  for (let file of files) {
    const component = file.split(/[/.]/)[1];
    console.log('component', component);
    list[component] = `./${file}`;
  }
  console.log(list);
}
makeList('packages', list)
module.exports = {
  entry: list, //入口文件
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "lib"),
    library: 'wfown-ui-test',
    libraryTarget: 'umd'
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: 'theme/[name].css'
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        use: [{
          loader: 'vue-loader'
        }]
      },
      {
        test: /\.(css|less)$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          'css-loader',
          'less-loader'  
        ]
      }
    ]
  }
}

在package.json文件中添加打包指令

"lib": "webpack --config ./build/webpack.component.js"

打包 yarn lib

NPM发布

本地组件编写测试打包完成之后，就可以上传到npm上了。 首先在package.json文件添加配置

  "name": "package-name",
  "version": "1.0.0",
  "description": "个人开发者UI组件库",
  "main": "lib/index.js",
  "private": false,
  "keywords": [
    "UI",
    "vue"
  ],
  "author": "wf_zk311",
  "files": [
    "lib",
    "packages"
  ]

name：包的名字

version：版本，低版本不能覆盖高版本

description：描述

main：入口主文件，当别人引用包的名字时候，其实就是用的这个文件

keywords：搜索的关键词

author：作者

files：要上传的文件

登陆：yarn login

发布：yarn publish

组件库文档问题

可以使用vuepress,链接在这,有兴趣的小伙伴可以去了解下，这里就不在叙述了。

安排按需引入

发现主流组件库都支持按需引入，馋的老子直流口水，咱这能行吗？什么直接安排

安装babel-plugin-component

yarn add babel-plugin-component -D

配置babel.config.js

"plugins": [
    [
      "component",
      {
        "libraryName": "package-name", //修改为自己组件库名称
        "camel2Dash": false, // 是否把驼峰转换成xx-xx的写法
        "styleLibrary": {
          "base": false, // 是否每个组件都默认引用base.css，有的老铁不用配置，但咱目前木有
          "name": "theme" // css目录的名字对应打包的时生成的css文件夹名称
        }
      }
    ]
  ]

都看到这了老铁，不点赞聊两句。