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

文章目录

  • 前言
  • 一、搭建流程
  • 二、上传流程
    • 1.基本要求
    • 2.创建个人的npm账号
    • 3.创建项目
    • 4.组件创建
    • 4.发布
  • 三、安装使用

前言

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

一、搭建流程

  • 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
            })
    }
}
  1. 修改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目录,如图:
如何利用Vue-cli 打造一个自己的通用UI组件库_第1张图片
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 引入使用了

你可能感兴趣的:(Vue开发)