2017-03-17 51 views
2

进行初始项目设置的分步指南如何从头开始创建Onsen UI 2 + React + Redux + Cordova应用程序是否有一步一步的指导?使用Cordova + Onsen + React

这里有很多指南,但几乎没有一篇介绍最初的项目设置:npm包的安装以及如何安装。您如何创建项目,如何构建项目,向何处发送css,何处发送逻辑等等。

在上周我读了很多关于Onsen和React的文章和教程。但我仍然没有清楚地了解所有这些事情在一个真实的项目中如何协同工作。我缺乏基础知识。

像一个小步骤引导:

  1. 使用NPM和安装下面的包...
  2. 这个包这个和这个,你必须配置它一样,和...
  3. 创建一个将使用Cordova + Onsen + React + Redux的项目,并且将使用Babel和WebPack,您必须使用这个和这个...并在以下文件中进行以下配置...
  4. 确定您创建了项目!太好了!现在这里是使用cordova初始化应用程序的正确方法...(因为我不明白我是如何初始化它的......我应该使用Cordova onDeviceReady?还是ons.onReady?或其他?)
  5. 你必须构建你这样的项目...因为它带来以下好处...
  6. 这是几个额外的库,可以帮助你,让你的生活更轻松...
  7. 这是一个工作项目的例子代码在哪里你可以看到一切:正确的应用程序初始化,辉煌的结构,与商店和异步Web服务工作...

如果有人知道在哪里f ind这个或者可以创建这个指南,请做!

回答

0

我用React + Onsen UI + Redux + Webpack 2的基本设置进行了回购。您可以在有或没有Cordova的情况下使用它,只需键入npm run即可查看可用命令。如果你对Webpack有所了解,理解配置应该很简单。

Here is the repo

这不是引导,而是一个例子,但它应该帮助你很多(我希望)

+0

我用这一个似乎是“官方”的一个https://开头github.com/monaca-templates/onsenui-v2-react-minimum 但是,似乎'monaca preview'无法访问Cordova插件(cordova.js)。所以我并不真正了解使用它与其他React + Webpack样板(如Create React App)相比的好处。你的支持吗? – Grsmto

+0

预览基本上运行webpack-dev-server,所以它不会有cordova(它是由“cordova run”本身添加的)。这就是为什么它被命名为预览(这是因为你可以看到UI的运行)。我的回购就是你所描述的,一个React + Webpack样板。与Create React App类似的区别在于它具有Onsen UI。如果您不使用IDE +在线付费工具,我不推荐使用monaca,因为它会增加不必要的代码,并且会使用缓存以外的node_modules(很多软件包也过时/不推荐) –

+0

要与cordova一起运行“预览”你应该在手表模式中加上“cordova run browser”同时运行webpack –