移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别 1 安装依赖包   npm install postcss-pxtorem --save-dev 2 创建 .postcss.js文件,做webpack相关配置 配置项 autoprefixer: 添加浏览器前缀

继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了)   Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠 (目前在Github上已经收获星星7857颗) 相比于其他Vue UI组件库,Vant 组件库不只是提供基础的UI组件,还增加了许多移动商城内常用的业务组件,可以让开发者快速构建移动商城.      墨刀的 Vant 组件库

前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件库[1] 和 React 技术栈的 yep-react 组件库[2].然而这些组件库大都从零开始搭建,包括 Webpack 的繁杂配置,Markdown 文件转 Vue 文件功能的开发,单元测试功能的开发.按需加载的 Babel 插件开发等等,完成整个组件库项目实属不易,也是一个浩大的工

背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.

vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoOpenBrowser .把它置为 true 即可. 2. 使用less(或者sass)全局变量 起因: 因为想定义一些常用的工具样式.类似:超过一行隐藏字体并用省略号显示,清除浮动,主题颜色等.就考虑不用每个页面都引入,能直接使用定义的工具样式. 第一步: 安装  npm install sass-res

前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/rollup **webpack** * 代码分割:可以将打包后的代码分割成多个*.chunk.js,这些分块可以在用户使用过程中按需加载,这意味着用户可以有更好的交互体验. * 静态资源导入:图片.CSS 等静态资源可以直接导入到你的 app 中,就和其它的模块.节点一样能够进行依赖管理.因此,我们

前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目需要你维护?你是否遇到两个项目需要开发类似的功能的情况?那么你是怎么做的呢? 有这么三种常用的解决方案: COPY 你可能会说我讲究速度,复制之前的组件到新项目中,慢慢的你会发现随着你的项目的增加代码量在成倍上升,重复工作浪费了你很多时间. 子模块 我可以抽离出所有公共的组件放入一个子模块(git

一个由个人开发的组件库,携带了一些众多的功能,包含了数据网络通信,文件上传下载,日志组件,PLC访问类,还有一些其他的基础类库. nuget地址:https://www.nuget.org/packages/HslCommunication/             github地址:https://github.com/dathlin/HslCommunication                                 如果喜欢可以star或是fork,还可以打赏支持. API文档

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容一次性加载源文件很大.比如登录主要就用了button和input,不需要打包table, tree这种复杂组件的. 在使用ant-design的时候,发现ant实现了按需加载,https://ant.design/docs/react/introduce-cn.所以想着自己的组件也支持相关的功能.

一个由个人开发的组件库,携带了一些众多的功能,包含了数据网络通信,文件上传下载,日志组件,PLC访问类,还有一些其他的基础类库. nuget地址:https://www.nuget.org/packages/HslCommunication/            github地址:https://github.com/dathlin/HslCommunication                                 如果喜欢可以star或是fork,还可以打赏支持. API文档的

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容一次性加载源文件很大.比如登录主要就用了button和input,不需要打包table, tree这种复杂组件的. 在使用ant-design的时候,发现ant实现了按需加载,https://ant.design/docs/react/introduce-cn.所以想着自己的组件也支持相关的功能.

介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 Native 代码),涉及前端(FE).iOS.Android 三端技术,兼顾通用性和定制化,支持自定义主题,用于开发和服务企业级移动应用.现在已经在 GitHub 上开源,地址:https://github.com/meituan/beeshell 截止目前,beeshell 中的组件已经在美团外

cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 个月,在这个过程中 cube-ui 受到了不少的关注,同时从社区中也收到了很多很好的反馈和建议.我们也一直在迭代更新,从最初的 1.0 版本到最近发布的 1.7 的版本,除了对原有组件做一些增强优化,我们也提供了很多新的组件.此外,周边后编译技术生态也做了很多优化,满足于更多场景需求,官网也做了一次

组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library的脚手架 前言 使用 webpack4,需要安装 webpack 和 webpack-cli yarn add webpack webpack-cli -D 然后就是书写配置文件. 项目脚手架结构 我写的 library 的目录结构如下,仅供参考,主要是模仿 iview 的结构,其中部分配置参考了

Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么Vant如何使用(以下操作都是基于vue-cli3) 1.如何自动按需引入组件? <1>安装插件:npm i babel-plugin-import -D babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入 <2>

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 尚妆大前端团队使用 weex 进行三端统一开发有一段时间了,截止本文发表「达人店」APP大部分页面都已经用 weex 进行了重构,在此期间也积累了一些基础组件和业务组件. 之前维护组件的方式是在达人店项目的工程内维护一个 components 文件夹,随日常开发迭代,并行需求与开发人员的增多,这种维护方式也暴露出一些问题. 1.开发人员可以随意跟随需求开发修改 components 内的组件,破坏约定好的规范,或埋入 bug

最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <style></style> 的 scoped 属性) 在编写Vue代码过程中,为了不让父组件相同样选择器名称设置的样式影响到子组件,我们往往会给 <style></style> 标签设置 scoped 属性.但是如果设置了scoped属性,在该组件内的 Css 就只能

module.exports = { presets: [ '@vue/app' ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] } npm install postcss-pxtorem --save-dev npm i -S amfe-flexible const autoprefixer = require('autoprefixer'); co

系列目录     [已更新最新开发文章,点击查看详细] WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型.语言和框架,真正做到了分离界面设计人员与开发人员的工作:同时它提供了全新的多媒体交互用户图形界面. 微软提供的WPF控件的功能很强大,但是样式不漂亮,需要专业的美工设计样式或皮肤.圈子里总有无私奉献的大牛们分享既漂亮又好用的WPF组件库,下面收集了几

文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打造自己的组件库? 组件库是现代前端领域中不可缺少的一项基建.它可以提高代码的复用性.可维护性,提高团队的生产效率,更好的服务于未来. 那么如何为团队打造自己的组件库呢? 最理想的方案是借用社区的能力,去裁剪一个优秀的开源库,只保留你需要的东西,比如它的架构.工程化和文档能力,以及部分基础组件,在裁剪

简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含多个独立发布的模块/包. ps.本文涉及到的工具配置其实在平时开发中一般都不需要自己配置,我们使用的各种脚手架都帮我们搞定了,但是我们至少得大概知道都是什么意思以及为什么,说来惭愧,笔者作为一个三四年工龄的前端老人,基本没有自己动手配过,甚至没有去了解过,所以以下大部分工具都是笔者第一次使用,除了介