乐趣区

关于前端:NutUI-31-正式发布开启多端开发之路

jiezi

作为一款具备京东格调的组件库，咱们始终致力于用心打造更合乎开发者体验的组件库。NutUI 3.0 上线后咱们研发团队也在一直的优化、测试、应用、迭代 Vue3 的相干组件，然而在跨端小程序的开发过程中，发现没有适合的组件库能够反对多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 可能为更多的开发者带来便当，咱们决定在 NutUI 中减少小程序多端适配的能力。

NutUI 开启多端之旅

以后业务环境下, 研发面临的以后的业务场景越来越简单, 产品公布的渠道越来越多，业务在领有本人 APP 的同时呈现了很多小程序渠道，以前研发只须要关注到业务的 APP 和 H5 就好，自从微信产出了微信小程序后，业界各大互联网公司都研发出本人的小程序平台，而且当前可能会愈来愈多，每个小程序平台都有本人的框架语言，如果业务多公布一个渠道，研发就要多写一套代码，在业务的渠道变多而研发资源匮乏的状况下，写一套代码能够疾速复用到各个小程序是研发以后的首要痛点。

为了给开发者提供更高效便捷的开发方式，NutUI 和 Taro 合力，现已能够用 NutUI 开发小程序了，NutUI 提供了 30+ 组件涵盖了日常业务开发应用的大部分组件。

二者的联合，不仅能够让开发者一处代码，多端运行，畅快自若地开发小程序。更能够在开发过程中，应用到更好看、更便捷、组件更丰盛的组件库。咱们将 NutUI 和 Taro 更完满地接合到一起，Taro 官网将 NutUI 作为 Vue 技术栈的举荐组件库。当初开发者将能够应用 NutUI 无缝开发 H5 和多端小程序。

NutUI 3.0 全新架构降级

NutUI 3.0 降级以来，咱们对框架进行了一些变更，上面是 NutUI 3.0 的根本框架结构，相比 2.0 咱们做出了以下降级：

  • Webpack 降级为 Vite，开发效率大幅晋升
  • 全面拥抱 TypeScript
  • Vue3 反对
  • 反对小程序开发

视觉体验全面降级

官网面目一新

NutUI 从 2.0 到 3.0 不仅是技术上的全新降级，组件库产品形象也面目一新，NutUI 3.0 从官网到文档再到 Demo 等咱们都进行了改版。改版后的首页，从多维度展现 NutUI 组件库的平台特点和常识积淀，对于新用户能够更好且系统性的理解 NutUI。

组件文档变动

在用户工夫注意力稀缺的时代，作为一个工具型的平台，更须要便捷高效的帮忙用户实现目标。咱们在文档页右上角加上了切换文档的 Tab，这样开发者能够更高效率的找到本人想要的相干文档，咱们当初曾经反对小程序预览 Demo 了，扫描右侧二维码能够间接查看 NutUI 3.X 组件库的小程序 Demo。

疾速上手小程序开发

装置

  • 通过 Npm 或 Yarn 装置

装置 Taro 脚手架

# 应用 npm 装置 CLI
npm install -g @tarojs/cli

# OR 应用 yarn 装置 CLI
yarn global add @tarojs/cli

# OR 装置了 cnpm，应用 cnpm 装置 CLI
cnpm install -g @tarojs/cli

!!! 值得一提的是，如果装置过程呈现 sass 相干的装置谬误，请在装置 mirror-config-china 后重试。

npm install -g mirror-config-china

查看是否装置胜利

taro -v

我的项目初始化

应用命令创立模板：

taro init myApp

依照下方图片顺次抉择，抉择 Vue3 + NutUI 模板

抉择 vue3-NutUI 的模板时，内置了按需加载的应用形式，开发者可依据本人的应用场景抉择全局应用。

按需加载应用示例（举荐应用形式）

import {createApp} from "vue";
import App from "./App.vue";
import {Button, Cell, Icon} from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(Button).use(Cell).use(Icon);

全局应用示例

import {createApp} from "vue";
import App from "./App.vue";
import NutUI from "@nutui/nutui-taro";
import "@nutui/nutui-taro/dist/style.css";
createApp(App).use(NutUI);

留神：这种形式将会导入所有组件

通过以上形式，即可疾速开发小程序场景。NutUI 团队会继续迭代多端性能，让开发者能够领有更敌对的多端开发体验。

将来瞻望

随着 NutUI 的用户群体越来越多，React 版本的呼声越来越高，咱们接下来会将局部的精力投入到 React 技术栈开发中，NutUI-React 将会在 Q4 与大家见面；咱们会对 NutUI 的产品体验进行一直优化和迭代，在 Vue 的版本上 NutUI 团队将会继续一直的丰盛组件；为了满足大部分开发者在应用组件时须要给上游设计师提供组件标准，咱们正在进行 NutUI 设计规范的输入和整顿，不久就会在官网上线 Sketch 资源包，纵情期待~

问卷调研

为了给您提供更好的服务，心愿您能抽出几分钟工夫，将您的感触和倡议通知咱们，咱们会对您的填答信息严格窃密。本次调研为有奖考察，残缺填答问卷的用户可抽取 京东 joy 周边礼品。

问卷链接：https://get.jd.com/#/survey/index?id=60280

链接

  • 仓库地址: https://github.com/jdf2e/nutui
  • 官网地址: https://nutui.jd.com/3x/#/
  • 退出咱们: https://nutui.jd.com/#/joinus
  • 反馈咱们：https://github.com/jdf2e/nutui/issues
退出移动版