2017-03-17 46 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 –