随着移动互联网的快速发展，手机应用成为人们日常生活中必不可少的工具。开发手机应用的最佳方式之一是使用 PhoneGap，它允许开发人员使用 HTML，CSS 和 JavaScript 开发跨平台的应用程序。而在设计 UI 界面时，使用Vue.js和ModularCSS可以让开发过程更加高效。
本文将为大家介绍一个能够将 PhoneGap、Vue.js 和 ModularCSS 集成在一起的 npm 包 —— phonegap-vuejs-modularcss。让我们一起来看看如何使用它来开发移动应用。
安装
首先，我们需要使用 npm 安装 phonegap-vuejs-modularcss，可以使用以下命令：
npm install --save phonegap-vuejs-modularcss
使用
为了使用该包，需要对项目的结构进行一些调整：
项目根目录下需要存在
www文件夹，而且该文件夹是必须的。这个文件夹需要包含两个文件 ——
index.html和config.xml。
安装完成后，我们需要将包引入到 index.html 文件中。我们可以在 head 标签内部的 meta 标签下添加以下代码：
<script type="text/javascript" src="path/to/dist/app.min.js"></script>
同样地，在该标签下，需要引入以下 CSS 文件：
<link rel="stylesheet" type="text/css" href="path/to/dist/app.min.css">
当然，最好确保经过绝对路径处理的文件路径可用，避免出现意外的错误。
简单示例
此时，我们可以尝试写一个简单的页面，来验证调用是否成功。以下是一个我们可以先用来测试的 Vue 文件：
-- -------------------- ---- -------
----------
---- ------------------
--------- --------- ------ - ----------------
------- -- - ---- --- ------- ----- ------------------------- --- ------------
------
-----------
--------
------ ------- -
--------- -
------------------------ -- ------------ -----------
--
--
---------
------ ------------- -------
----------
---------- ------
--
--------- ---
------------- ----
-
--------- -----
----- ----
--------我们可以将这个文件命名为 App.vue，然后在 main.js 文件中进行如下配置：
-- -------------------- ---- -------
------ --- ---- ------
------ --- ---- ------------
------------------------ - ------
---------------------------------------- -- -- -
-- -------------- ------ --
--- -----
--- -------
----------- - --- --
--------- ---------
---
-- -------当你运行该项目时，你会在手机上看到类似如下的内容：
结语
在本文中，我们介绍了如何使用 phonegap-vuejs-modularcss 包创建 PhoneGap 应用，以及利用 Vue.js 和 ModularCSS 使它更加高效便捷。该库具有指导性意义，我们将会在以后的过程中使用到它，同时也祝愿你在开发移动应用时能够取得进一步的成功。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663f81e8991b448e249e