安装

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

直接HTML引入

引入必须的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

您还可以直接链接在线的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 也可以在 unpkgcdnjs 上获取。

NPM安装

在大型项目中,推荐使用 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 的变更细节会描述在发布说明中。

最新版本

最新版本是:


发现错误?想参与编辑?在 GitHub 上编辑此页