Mobilebone.js使用教程-安装

安装

Mobilebone 主要支持直接引用和NPM安装两种模式。

引入必须的CSS文件：

<link rel="stylesheet" href="./dist/mobilebone.css">

mobilebone.css 包含的CSS内容非常的少（< 3K），且非常稳定，因此如果条件允许，可以和其他业务CSS代码整合在一起。

如果页面的过场动画不是左滑右滑，而是淡入淡出、飞翔、缩放之类，还需要引入 mobilebone.animate.css。

<!-- 此文件只在src目录中, dist目录中没有 -->
<link rel="stylesheet" href="./src/mobilebone.animate.css">

引入必须的JS文件：

<script src="./dist/mobilebone.js"></script>

此时Mobilebone 会被注册为一个全局变量。

您还可以直接链接在线的CDN地址，例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.css">

<script src="https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.js"></script>

引用第3方提供的静态资源总是伴随着巨大的风险（域名变更、站点倒闭或者被墙），因此，上面的地址不建议在生产环境使用。

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
    import Mobilebone from 'https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.esm.js'
</script>

通常更建议使用带有具体版本号的资源，以避免新版本带来不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/mobilebone@2.7.9/dist/mobilebone.js"></script>

Mobilebone 也可以在 unpkg 和 cdnjs 上获取。

在大型项目中，推荐使用 NPM 安装，因为 NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用：

npm install mobilebone

例如在Vue-CLI环境中，可以使用下面的语法进行CSS和JS的引入：

<!-- 支持import引入 -->
<script>
import Mobilebone from 'mobilebone'
</script>
<!-- CSS引用 -->
<style src="mobilebone/dist/mobilebone.css">

Mobilebone 不支持IE9及其以下版本的浏览器，因为 Mobilebone 使用了 IE10 浏览器才开始支持的 HTML5 history API 作为路由管理。

Mobilebone 遵循语义化版本控制。从 v2.8.0 开始，Mobilebone 的变更细节会描述在发布说明中。