將OnsenUI添加到現有的Cordova項目中

Question

標題說明了一切，但我似乎找不到找到將OnsenUI框架添加到現有Cordova項目中的方法。 如何才能做到這一點？

Answer 1

我僅需幾個命令即可將其添加到我的項目中。 將OnsenUI添加到現有項目就像啟動一個新的OnsenUI項目一樣，只是沒有創建新項目的第一步。

資料來源： https : //onsen.io/v2/guide/vue/
我的項目是Vue項目，因此，如果您不使用Vue，則只需對框架使用onsen.io指南。

第1步

在您現有的cordova項目中。 在項目的根目錄下，運行npm install onsenui --save

第2步

如果您使用的是OnsenUI兼容的特定框架（例如Vue），請確保也安裝該框架： npm install vue-onsenui --save

第三步

如果您正在執行Vue項目：

// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// JS import
import Vue from 'vue';
import VueOnsen from 'vue-onsenui'; // This imports 'onsenui', so no need to import it separately. So if you're not using vue, write import Onsen from `onsenui` instead, etc

Vue.use(VueOnsen); // VueOnsen set here as plugin to VUE. Done automatically if a call to window.Vue exists in the startup code.

如果您不使用vue，則可以在https://onsen.io/v2/guide/frameworks.html#introduction-to-bindings上找到特定於框架的說明的鏈接。

同樣，將其添加到現有項目或創建新項目也沒有什么不同。

最后，您只需要瀏覽並編輯html標簽即可。 例如，將<button>更改為<ons-button> ；如果使用Vue，則將<v-ons-button>更改為。