将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

步骤3

如果您正在执行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>更改。