github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package.json 文件. (2)新建 webpack.config.js 打包文件. (3)新建 README.md 项目说明文件. (4)新建 .gitignore 项目忽略文件. (5)安装webpack 用于编译 JavaScript 模块. npm install webpack webpack-

import React, { Component } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import classNames from 'classnames' import { CloseButton, } from '@dby-h5-clients/pc-1vn-components' import './index.less' class NormalTab extends Comp

1.引言 多人.多组织或多组件发布 npm 包到同一个仓库时,可能出现命名冲突问题. 为了解决这个问题,npm 引入了“scope”(范围)概念. 在 Angular 项目中,我们通常可以看到“@angular/core”.“@angular/common”等以“@”符号开头.“/”间隔形式的依赖包,其中“@”和“/”之间的部分就是“scope”,类似编程环境中的“命名空间”. 包含“scope”的包安装到本地后,“scope”以文件夹的形式表现,如下图所示: 2.安装 安装一个包含“scope

博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构的博客 关于 Element 组件的穿梭框的重构,当时还有一些同学直接通过微信询问很多关于这个组件的问题 去年在上家公司就重构过的穿梭框,一直懒得封装成一个 Vue 组件发布到 npm,现在趁着目前比较闲,就这几天继续完善和优化.迭代更新 + 封装,终于发布啦~ krry-transfer 基于 E

react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK. 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释). ⚛️ 支持 React Hook 新增特性(需要 React 16.8+). 不依赖任何第三方组件. 安装 不依赖 uiw 组件

前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要有哪些东西. 然后说一些复杂组件需要的功能,比如闭合标签内部dom怎么处理,其实就是插槽功能,比如数据监听,内部做一些业务逻辑. 想看原码的点这里,这是一个GitHub上完整的 react hooks 项目,  点这里,看源码 目录 1.思路 及

如何基于 React 封装一个组件 前言 很多小伙伴在第一次尝试封装组件时会和我一样碰到许多问题,比如人家的组件会有 color 属性,我们在使用组件时传入组件文档中说明的属性值如 primary ,那么这个组件的字体颜色会变为 primary 对应的颜色,这是如何做到的?还有别人封装的组件类名都有自己独特的前缀,这是如何处理的呢,难道是 css 类名全部加上前缀吗,这也太麻烦了! 如果你正在困惑这些问题,你可以看看这篇文章. 我会参照 antd的divider组件 来讲述如何基于React封装

一.使用 vue create currentdatetime创建项目(可查考https://cli.vuejs.org/zh/guide/creating-a-project.html),创建成功后项目目录结构如下: 二.在项目的根目录新建一个packages文件夹,用于存放需要发布的组件. 三.支持对package目录的处理,在vue.config.js文件中修改配置中的chainWebpack选项. const { defineConfig } = require('@vue/cli-se

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,

一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用this.state = {} 来给类的实例添加state属性,表示“状态”. 在render()函数的return中,可以用{this.state.a}插值来显示出每一个属性的值 import React from "react"; export default class App ex

react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底层技术的便利措施来构建 React 组件. Tip:从一项新技术的底层元素起步有利于使用者更好的长期使用它 跨平台 大部分 react 应用是在 Web 平台上.而 React Native 和 React VR 这样的项目则创造了 react 应用在其他平台上运行的可能 React 应用主要成分

前言 npm(Node Package Manager),一个Node的包管理器,平时我们常用的公共模块(插件)或者叫做包大多都放在上面,所以接下来要封装的插件,我们就简单称它为npm包,本文从就从这个简单的例子开始,逐步对它进行封装-发布-更新-扩展-使用,进而到得一个相对完整的npm包,下面开始. 一.一个最简单的npm包 1.1 新建文件夹 可以找个地方直接建个文件夹,最好语义化一点,这样以后也方便管理,我们这里用终端建文件夹: mkdir toupper-case-project //

主要对props更多重要的特性进行学习; 还是用之前代码, index.js代码为: var React = require('react'); var ReactDOM = require('react-dom'); import ComponentHeader from './components/header'; import ComponentFooter from './components/footer.js'; import BodyIndex from './components

react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install reactjs-swiper 2.使用 import React, {Component} from 'react'; import {render} from 'react-dom'; import ReactSwiper from 'reactjs-swiper'; import './sas

本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 前面已经封装了很多常用.基础的组件了:base-module, 包括了: crash 处理 常用工具类 apk 升级处理 log 组件 logcat 采集 ftp 文件上传 blur 高斯模糊 fresco 图片处理 等等 那么,今天继续再来封装一个网络组件,基于 volley 的二次封装,目的也是为了简化外部使用,以及新项目可快速接入使用. 这样一来,开发一个简单的 app 所需要的公共基础组件基本都已经封装好了,在这些组件基

开发发布npm module包 问题 在项目开发过程中,每当进入一个新的业务项目,从零开始搭建一套前端项目结构是一件让人头疼的事情,就要重新复制一个上一个项目的前端框架和组件代码库.其中很多功能的模块组件都要重复拷贝,可以统一将这些组件类的模块统一打包上传至npm,以后每次都只需要install一下就可以了. 前期准备工作 安装nodejs github上新建一个repository用于托管组件代码 新建一个npm账户用于发布包 这里以工具组件库中的时间格式转换工具为例,主要用于对Date时间进

1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件,新增packages文件夹存放自己的vue组件 这里我写了一个actionsheet的vue组件放到packages文件夹中 并且在src目录中新增了个js,目录像这样: 其中lib目录是后续打包生成的先不用管 其中index.js是为了把packages中的组件提供一个统一入口来import 代码

一.使用vuecli3创建项目 vue create svgicon 二.修改目录,开发组件前的准备 把src目录改为examples作为查看组件的演示目录,新建packages目录作为组件编写的目录. 在packages下新建index.js作为导出组件入口,作为整个组件库的导出,新建组件文件夹作为组件源码的放置,比如我的组件目录叫做 svg-icon ,在svg-icon文件夹下新建index.js文件对外提供对文件的引用,新建src文件夹并创建svg-icon.vue作为组件文件.整个pa

使用Vue-cli3.0创建的项目,如何发布npm包 在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置.这里记录一下一些常见的操作. 创建index.js进行模块的导出 将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册. import App from './App.vue' export default App; 修改vue.config.js配置

组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点 一.父组件传参到子组件 和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取 而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu

React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常可以使用 React-loadable. React-loadable 使用 例如,对于项目中的detail组件(/src/pages/detail/),在 detail 目录下新建 loadable.js: import React from 'react'; import Loadable fr