京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库，是开发和服务于移动 Web 界面的企业级产品。经过长时间的开发与打磨，NutUI 3.0 终于要和大家见面了！3.0 版本在技术和视觉方面都做出了较大改进，让组件看起来更绚丽，用起来更舒服。

源码抢先看：https://github.com/jdf2e/nutui

技术看点：

1. 拥抱 Vue3

  • 引入 Vue3 新特性 Composition API、Teleport、Emits 等
  • 破坏性变更，全面升级
  • 采用组合式 API Composition 语法重构，结构清晰，功能模块化
  • 组件 emits 事件单独提取，增强代码可读性
  • 使用 Teleport 新特性重构挂载类组件

2. 构建工具升级为 Vite2.x

弃用 webpack，引入下一代前端构建工具 Vite。启动速度由原来 30s 提升到 500ms 左右，将大幅提升开发效率。

3. 全面使用 TypeScipt

NutUI 3.0 使用 TypeScript 作为主要开发语言，在前端应用复杂度不断飙升的大背景下，应对组件不易维护且难于扩展的问题。

视觉体验全面升级

NutUI 3.0 根据最新发布的 JD App9.0 规范，结合零售众多的应用场景，对 NutUI 组件进行重新整理和设计

  • 减少冗余控件
  • 帮助移动端设计师快速复⽤基础组件
  • 建立通⽤的细节设计标准
  • 提高界⾯的模块化通用程度
  • 建⽴设计与开发对接的基础标准
  • 提⾼产研输出对接的效率，降低输出工作量
  • 基于京东设计语言体系，构建场景
  • 骨骼精细化重构主流程，构建“场景动线”，让体验更流畅

品质服务

长期以来，团队的小伙伴都在尽心尽力地维护着 NutUI 2.0。在 3.0 版本发布后，我们依然会积极地维护与迭代，为有需要的同学提供技术支持，也会不定时地发布一些相关的文章帮助大家更好地理解与使用我们的组件库。

发布时间：

NutUI 3.0 预计发布的时间是 2021-03-31 。 敬请期待！

NutUI 2.0： nutui@jd.com

来点个 Star ️ 支持我们一下吧 ~

京东 Vue3 组件库闪亮登场的更多相关文章

  1. 京东 vue3 组件库震撼升级，如约而至！

    京东零售开源项目 NutUI 是一套京东风格的轻量级移动端 Vue 组件库,是开发和服务于移动 Web 界面的企业级产品.经过长时间的开发与打磨,NutUI 3.0 终于和大家见面了!3.0 版本在技 ...

  2. 京东 Vue3 组件库支持小程序开发啦！

    源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...

  3. Vite+TS带你搭建一个属于自己的Vue3组件库

    theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...

  4. 从0搭建Vue3组件库:button组件

    button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...

  5. 从0搭建vue3组件库:Shake抖动组件

    先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...

  6. 从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag

    今天看到一篇文章中提到了一个好用的工具release-it.刚好可以用在我正在开发的vue3组件库.纸上得来终觉浅,绝知此事要躬行,说干就干,下面就介绍如何将release-it应用到实际项目中,让组 ...

  7. 开箱即用 yyg-cli（脚手架工具）：快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  8. 从0搭建vue3组件库: Input组件

    本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...

  9. 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

    相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kit ...

随机推荐

  1. Codeforces Global Round 9 A. Sign Flipping

    题目链接:https://codeforces.com/contest/1375/problem/A 题意 给出一个大小为 $n$ 的数组 $a$,可以反转每个数的正负,要求: 至少有 $\frac{ ...

  2. 矩阵树定理(Kirchhoff || Laplace)初探——Part 1（无向图计数）

    必备知识: 高斯消元,图论基本知识(好像就这...(雾)) 这里是无向图部分,请不要走错场... 定义 我们将邻接矩阵定义为矩阵A(u,v),我想邻接矩阵就不用再多说了: 我们将每个点的度数矩阵定义为 ...

  3. redis如何实现高可用【主从复制、哨兵机制】

    实现redis高可用机制的一些方法: 保证redis高可用机制需要redis主从复制.redis持久化机制.哨兵机制.keepalived等的支持. 主从复制的作用:数据备份.读写分离.分布式集群.实 ...

  4. C#枚举（一）使用总结以及扩展类分享

    0.介绍 枚举是一组命名常量,其基础类型为任意整型. 如果没有显式声明基础类型, 则为Int32 在实际开发过程中,枚举的使用可以让代码更加清晰且优雅. 最近在对枚举的使用进行了一些总结与整理,也发现 ...

  5. 流水线cpu —Verilog HDL

    一.准备工作 先看看书(<计算机原理与设计 Verilog HDL版>),搞懂一点原理.然后照着书上的代码写一写(用8.4的就可以了,不用8.6的). 注意mux2x32,mux4,cla ...

  6. QXDM和QCAT软件使用指南

    一.传送门 链接:https://pan.baidu.com/s/1i55YXnf 密码:v6nw 二.QXDM,QPST和QCAT的简单说明 QXDM,QPST和QCAT是Qualcomm高通公司针 ...

  7. vue中获取元素并控制相应的dom

    1 在标签中使用ref="xxx" 2 在methods中调用this.$refs.xxx this.$refs.xxx.$el获取dom 注意1:大多数情况下为了复用方法,将xx ...

  8. Netty（六）揭开 BootStrap 的神秘面纱

    6.1 客户端 BootStrap 6.1.1 Channel 简介 在 Netty 中,Channel 是一个 Socket 的抽象,它为用户提供了关于 Socket 状态(是否是连接还是断开)以及 ...

  9. msfconsole web后门

    一.PHP后门 在meterpreter中有一个名为PHP meterpreter的payload,利用这个可以成功反弹.步骤如下: 1. 使用msfvenom 创建一个webshell.php 2. ...

  10. Python对excel的基本操作

    Python对excel的基本操作 目录 1. 前言 2. 实验环境 3. 基本操作 3.1 安装openpyxl第三方库 3.2 新建工作簿 3.2.1 新创建工作簿 3.2.2 缺省工作表 3.2 ...