【问题标题】：Add OnsenUI to an existing Cordova project将 OnsenUI 添加到现有的 Cordova 项目
【发布时间】：2018-06-29 15:56:46
【问题描述】：

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

【问题讨论】：

标签： cordova onsen-ui onsen-ui2

【解决方案1】：

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

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

第一步

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

【讨论】：