初识Framework7,搭建app手机端项目

写在前面:在Framework7 (以下简称F7)的官方文档中提到“因为Framework7是通过Ajax在不同页面间跳转的,所以你需要启动一个 http 服务器才可以(不要直接打开本地文件)”,使用工具HBuilder,创建移动App项目,可以解决这个问题,实现页面间的跳转。

  • 下载Framework
    地址:Framework官网地址
    选择“下载”,完成之后,解压即可

    初识Framework7,搭建app手机端项目_第1张图片

  • HBulider工具
    下载:HBuilder官网地址

初识Framework7,搭建app手机端项目_第2张图片

点击“下载”,等待下载完成解压后,不需要安装,直接运行.exe文件即可。

初识Framework7,搭建app手机端项目_第3张图片

运行后会跳转到以下页面,选“暂不登录”,进入入门教程页面。

初识Framework7,搭建app手机端项目_第4张图片

之后,在菜单导航栏中,选择“文件”-> “新建” ->”移动App”,输入项目名称“app”(自定义,其它也行)。

初识Framework7,搭建app手机端项目_第5张图片

将F7目录下的dist文件夹复制到app目录下,并修改名称为“framework7”,此时,项目的目录结构应该是

初识Framework7,搭建app手机端项目_第6张图片

在index.html点击鼠标右键,选择运行方式->web应用程序,将页面输出到浏览器上(此处运用的是谷歌浏览器)。
在浏览器上选择开发者工具(快捷键F12)->切换响应式页面->选手机型号。

初识Framework7,搭建app手机端项目_第7张图片

此时就已经搭建好啦,后续自己进行学习了。

你可能感兴趣的:(框架搭建)