制作自己的ui组件库

制作一个类似antd的ui组件库并发布到npm上
1.注册一个npm账号官网 https://www.npmjs.com/signup
2.使用webpack babelrc搭建一个框架
Webpack 主要时进行开发时的热加载配置 css-loader file-loader
babelrc主要是配置
“presets”:[
“@babel/preset-env”,
“@babel/preset-react”
],
进行一个预加载使得js能运行最新的编程语法
3.搭好框架后进行代码的编写
暂时做了一个按钮一个modal弹框其他后期在做
4.使用 npm login 登录npm账号
5.使用npm publish发布包

编写npm的注意事项
1.要实现按需加载，那么就要在entry配置的输入文件index.js
做一个导出
import Button from ‘./src/component/button/button.js’;
import Modal from “./src/component/modal/modal.js”;
export {
Modal,Button
}
2.要注意不可使用箭头函数
因为要编写箭头函数在开发npm包配置的babelrc文件时是在
plugins插件里面编写的，此时使用箭头函数测试毫无问题
“plugins”:[
“@babel/plugin-transform-modules-commonjs”,
“@babel/plugin-proposal-class-properties”
]
但是，在使用这个npm包时问题出现了，使用是的babelrc文件如下
“presets”:[
“@babel/preset-env”,
“@babel/preset-react”
],
“plugins”:[
“@babel/plugin-transform-modules-commonjs”,
“@babel/plugin-proposal-class-properties”,
[
“import”,{
“libraryName”:“antd”,
“libraryDirectory”:“es”,
“style”:“css”
}]

此时测试的程序是先执行presets 然后执行node_modules 最后执行plugins,而npm包是在node_modules中的

使用与测试
用webpack搭建一个支持jsx的框架
babelrc中支持 preset-env (js最新语法格式） preset-react(react语法)
即可使用npm包 tianmm_ui_eee_model

import {Modal, Button} from "tianmm_ui_eee_model"
import axios from 'axios';
class Test1 extends PureComponent {constructor(props) {super(props);this.state = {}}componentDidMount() {}render() {return (<div><div className={styles.ioio}>12</div><Modal></Modal><Btn></Btn><Button></Button></div>)}
}
export default Test1;

制作自己的ui组件库相关推荐

热门 UI 组件库离线文档制作教程（iView、Arco Design）
概述前端 UI 组件库层出不穷,版本更新又是你追我赶,查看官方文档网站是前端工程师日常行为,如果开发机无法连接互联网就会非常不方便(CTRL+C / CTRL+V 已然不香
7 个热门又优质的小程序 UI 组件库，社区、电商、工具各类都有！
如果你也是一名小程序开发者,当你打开一个高颜值的小程序时,是不是很想知道「这用的是哪一套 UI 组件库」呢? 目前,网上已有不少开源的小程序组件库,但选择太多往往让人挑花了眼,反而不知哪一款才适合自己 ...
01-小程序UI组件库
如果你也是一名小程序开发者,当你打开一个高颜值的小程序时,是不是很想知道「这用的是哪一套 UI 组件库」呢? 目前,网上已有不少开源的小程序组件库,但选择太多往往让人挑花了眼,反而不知哪一款才适合自己 ...
React UI 组件库
上篇文章中写了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJS的UI组件库. 一.Material- ...
与element-UI相媲美的前端UI组件库ArcoDesign 开源啦
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统.在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,我们开源了 ArcoDesign 设计系统.旨在 ...
PrimeVue - 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库
来自国外的一个优秀的前端 UI 组件库,基于 Vue 3 很有特色,值得研究学习和上手使用. PrimeVue 介绍 PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 w ...
推荐微信小程序常用的几个UI组件库
在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距. 所以在这里我给大家推荐几个好看,常用的几个UI组件库. WeUI WeUI 是微信官方 ...
UI组件库Vant Weapp的下载和使用
Vant Weapp - 轻量.可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一.开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面 ...
LCUI.css 0.1.2 发布，基于 LCUI 开发的 UI 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> LCUI.css 是一个适用于 LCUI 应用程序的 UI 组件库,使用 C 语言编写,提供了一些通用的组件和 c ...

制作自己的ui组件库

制作自己的ui组件库相关推荐

最新文章

热门文章