如何利用Vue-cli 打造一个自己的通用UI组件库

前言

这篇文章的主要内容主要的目的是向大家介绍前端工程化的第一步（构建一个自己的通用组件库），这篇文章是工程化系列文章的第一篇，后期还会不断的更新其他工程化相关的文章，内容也会越来越硬核，对工程化感兴趣的童鞋可以三连一下，相互学习，共同进步

一、搭建流程

• List item

二、上传流程

1.基本要求

我们这个组件库是基于，脚手架搭建所以和平时创建项目的流程基本相似，像安装node、npm、vue-cli环境，git 等等 这些前端开发，最基本的流程就不再一一赘述了，如何前面那些东西你还没搞定，那你要好好加油，奥里给

2.创建个人的npm账号

1. 前往npm 官网注册一个属于自己个人的账号，类似github账号那样
2. 确保本地安装node、npm等基础环境
3. 使用npm adduser 绑定你注册的npm账号，此处需要输入用户名、密码，邮箱（备注：输入密码的时候没有光标提示，正常输入即可）
4. 绑定成功之后后有提示
5. 输入 npm whoami 命令查看绑定账号是否是你的账号

3.创建项目

1. 使用 vue create xx 创建项目
2. 按照需求选择安装对应的插件
3. 修改项目目录，创建packages目录，修改src目录为examples目录
4. 修改vue.config.js 中的入口文件

module.exports = {
    // 修改 src 为 examples
    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')
            .tap(options => {
                // 修改它的选项...
                return options
            })
    }
}

5. 修改package.json

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

4.组件创建

我们所有的组件都需要在packages目录中完成，并且一个组件一个文件夹，这个组件目录下面必须有一个index.js 和src目录，如图：

src里存放对应的单文件组件，index对这些单文件组件进行暴露

import HButton from './src/h-button'
HButton.install = app => {
    app.component(HButton.name, HButton)
}
export default HButton

在全局的mian.js 或者index.js 中进行注册，暴露

import HButton from './h-button/index.js'

const components = [HButton];


const install = app => {
    if (install.installed) return;
    // 遍历注册
    components.forEach((item) => {
        app.component(item.name, item)
    })
}


// // 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    HButton
}

4.发布

发布之前使用命令npm run build-bundle 再编译一次，保证包文件是最新的。最后使用npm publish --access public 推送到npm上

三、安装使用

• 使用 npm install xxx --save 安装
• 然后就可以通过import 引入使用了