cordova - 将 OnsenUI 添加到现有的 Cordova 项目

Question

标题说明了一切，但我似乎找不到将 OnsenUI 框架添加到现有 Cordova 项目的方法。如何才能做到这一点？

Answer 1

我只用几个命令将它添加到我的项目中。将 OnsenUI 添加到现有项目就像开始一个新的 OnsenUI 项目，只是没有创建新项目的第一步。

来源：https
: //onsen.io/v2/guide/vue/ 我的项目是一个 Vue 项目，所以如果你不使用 Vue，你只需为你的框架使用 onsen.io 指南。

步骤1

在您现有的科尔多瓦项目中。在项目的根级别，运行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>.