资讯专栏INFORMATION COLUMN

利用 Nowa 分分钟创建和维护 React 应用,抛弃命令行

coolpail / 3560人阅读

摘要:接下来会介绍如何使用快速开发应用。但是因为是教程,所以我们点按钮创建项目。从创建到启动,不过一分钟的事情,是不是超级方便快捷呢小特性用户可以在右侧命令集区添加自定义命令,所有的命令都一键运行,你都不需要打开终端了。

前言吐槽

前端的技术发展辣么快,对于前端新手来说,我还没怎么使用 jQuery 开发界面就要换成Angular & Vue & React & ... 更复杂的是,用户还要学习一堆复杂的构建工具把页面进行优化优化再优化。

然而很多前端开发者并不想把时间浪费在构建上,希望专注于页面开发。那么有没有一套成熟的解决方案帮助用户节省学习成本,快速开发应用呢?

答案当然是有的,如果你是个初学 Webpack 和 React 这一套生态体系的人,接下来我介绍的这个工具将非常适合你。

主角来临

注意注意了,非常高效快捷的桌面可视化工具 Nowa 诞生了!

Nowa(Not Only for Web App, but also for anything) 是一个跨平台的可视化 Web 开发工具,旨在帮助用户部署环境,简化项目的创建、构建、开发以及调试流程。

Nowa 是为了解决以下痛点:

每次下载或新建项目都要安装一坨开发用的依赖,而这些依赖绝大部分都是重复的,耗时又占空间;

每个项目的构建任务配置在自己项目中维护,不方便统一维护和管理;

构建配置对于很多新手用户来说还是太繁琐,迫切需要一个一站式的解决方案;

项目模板的更新依赖于脚手架的发布,频繁更新用户体验不佳;

希望可以在一个地方找到项目工程化常用命令及工具;

它内置了一整套 Webpack 构建体系,用户无需安装成套复杂的依赖,只需下载安装即可使用。接下来会介绍如何使用 Nowa 快速开发 React 应用。

教程有大图 创建项目

初始化安装需要一些时间,菊花转完之后会出现简单的欢迎页:

用户可以通过点击导入按钮活着拖拽项目导入已有的 Nowa 项目。但是因为是教程,所以我们点Create New Project按钮创建项目。

选择模板

图片上提供了三个官方模板,每一个模板对应一种react开发场景,用户可以选择适合自己的。
Salt & Antdmobile 模板适合开发 H5 应用, Uxcore 模板适合开发 Web 应用。官方模板不够用的话,可以添加自定义模板,如果你有优秀的模板拿来秀,请联系笔者把它变成官方模板。

我们选择 Salt 模板进行初次开发。点击Create按钮进入表单填写的页面,请选择适合自己的 Npm 源,内陆用户请选择 taobao

点击提交按钮之后,分分钟就下载好依赖了, 飞一般的速度,你值得体验!

启动项目

依赖安装结束之后,页面自动切换到项目详情页。

如果点击 Start 按钮,工具就会自动构建项目,用户都不需要写复杂的 Webpack 配置,Nowa 帮你实现模块实时热替换。

如果点击了Compile按钮,工具会自动打包项目到dist文件夹。

从创建到启动,不过一分钟的事情,是不是超级方便快捷呢?

小特性

用户可以在右侧命令集区添加自定义命令,所有的命令都一键运行,你都不需要打开终端了。如果觉得英文版看起来别扭,可以在工具设置里面切换到中文版。

Nowa 还提供人性化的依赖管理的功能,用户一眼望尽所有需要更新的依赖,一键更新所有安装,简直不要太爽了!

当然重点是 Nowa 跨平台而且开源~
Windows
Mac
Linux

如果工具用的舒服,请到 Github上赏星星~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82504.html

相关文章

  • Nowa 上手篇(1)- 介绍

    摘要:上手篇介绍上手篇创建项目上手篇工具使用指南上手篇巧用命令集的意思是,其实笔者第一次接触到它的时候,还以为是诺娃的意思,可能是纪念开发者的媳妇儿,开个小玩笑。怎么用请看接下来的上手篇创建项目。 这个专题主要是详细介绍 Nowa 工具,为此码字无数。 Nowa 上手篇(1)- 介绍 Nowa 上手篇(2)- 创建 React Web 项目 Nowa 上手篇(3)- 工具使用指南 Nowa...

    Taonce 评论0 收藏0
  • Nowa 上手篇(2)- 创建 React Web 项目

    摘要:如果项目之前已经存在,会弹窗提示用户是否覆盖安装。静静等待依赖安装安装结束之后,项目会自动导入到左侧的项目列表中。再次点击停止按钮,会结束对项目的监听。 本系列文章,不断更新中... Nowa 上手篇(1)- 介绍 Nowa 上手篇(2)- 创建 React Web 项目 Nowa 上手篇(3)- 工具使用指南 Nowa 上手篇(4)巧用命令集 ... 在看完废话超多的介绍篇后,欢...

    oysun 评论0 收藏0
  • Nowa 上手篇(3)- 工具使用指南

    摘要:本系列文章,不断更新中上手篇介绍上手篇创建项目上手篇工具使用指南上手篇巧用命令集这一篇文章主要是工具的使用指南。创建项目请参考上手篇创建项目导入项目请直接把项目文件夹拖入工具,或者点击项目列表的文件夹图标。 本系列文章,不断更新中... Nowa 上手篇(1)- 介绍 Nowa 上手篇(2)- 创建 React Web 项目 Nowa 上手篇(3)- 工具使用指南 Nowa 上手篇(...

    Achilles 评论0 收藏0
  • 2017年前端流的数百个javascript库,你会几个?

    摘要:有数百个免费的库出来,为应用程序选择正确的框架变得非常困难。是流行的驱动技术之一,由于年创建。在这三个块中,有几个暴露低层接口的绑定。反应由,和许多开发人员和个人的社区维护。诞生于年,是一个轻量级的框架。 有数百个免费的JS库出来,为应用程序选择正确的JavaScript框架变得非常困难。一些开发商最终会抛弃,而其他开发者则迅速发展,并得到广泛采用。许多开发人员只知道像jQuery和R...

    CoXie 评论0 收藏0
  • UXCore:一个兼容主流浏览器的 React PC 组件库

    摘要:为什么我们需要是一个基于的套件库,兼容。全面的国际化支持所有组件的内置文案支持国际化,大部分文案用户可以主动设置。持续的功能增强借助社区和团队自身的力量,会在现有基础上优化使用体验,增强组件功能,添加更多常用组件来满足不同场景的需求。 showImg(https://gw.alicdn.com/tps/TB1TVapKFXXXXbbXpXXXXXXXXXX-1000-500.png);...

    Big_fat_cat 评论0 收藏0

发表评论

0条评论

coolpail

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<