在本章中，我们将讨论如何安装和设置Framework7.
您可以通过两种方式下载Framework7 :
从 Framework7 Github存储库下载
您可以安装Framework7，使用Bower，如下所示 :
bower install framework7
成功安装Framework7后，您需要按照以下给定的步骤在您的应用程序中使用Framework7并减去;
步骤1 : 您需要使用以下命令安装 gulp-cli 来构建Framework7的开发和dist版本.
npm安装gulp-cli
cli 代表Gulp的命令行实用程序.
第2步 : 必须使用以下命令全局安装Gulp.
npm install --global gulp
第3步 : 接下来，安装NodeJS包管理器，它安装节点程序，以便更容易指定和链接依赖项.以下命令用于安装npm.
npm install
第4步 : 可以使用以下命令构建Framework7的开发版本.
npm build
第5步 : 构建Framework7的开发版本后，使用以下命令从 dist/文件夹开始构建应用程序.
npm dist
第6步 : 将您的应用程序文件夹保留在服务器中并运行以下命令以在应用程序页面之间导航.
gulp server
CDN或内容交付网络是一个服务器网络，旨在为用户提供文件.如果您在网页中使用CDN链接，则会将托管文件的责任从您自己的服务器转移到一系列外部服务器.这也提供了一个优势，如果您的网页的访问者已经从同一CDN下载了Framework7的副本，则不必重新下载.您可以将以下CDN文件包含在HTML文档中.
以下CDN用于 iOS应用程序布局 :
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
它用于将Framework7 iOS CSS库包含到您的应用程序中.
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
它用于为您的应用程序包含Framework7 iOS相关颜色样式.
以下CDN用于 Android/Material App Layout :
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
它用于将Framework7 JS库包含到您的应用程序中.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>
它用于在您的应用程序中包含Framework7 Material样式.
我们是在本教程中使用库的CDN版本.我们使用AMPPS(AMPPS是Apache，MySQL，MongoDB，PHP，Perl和Python的WAMP，MAMP和LAMP堆栈)服务器来执行我们的所有示例.
以下示例演示了如何在Framework7中使用简单应用程序，当您单击导航栏时，它将显示带有自定义消息的警告框.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>接下来，再创建一个HTML页面，即 envirmnt_about.html ，如下所示 :
envirmnt_about.html
<div class = "navbar"> <div class = "navbar-inner"> <div class = "left"> <a href = "#" class = "back link"> <i class = "icon icon-back"></i> <span>Back</span> </a> </div> <div class = "center sliding">My Blog</div> <div class = "right"> <a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i> </a> </div> </div> </div> <div class = "pages"> <div data-page = "blog" class = "page"> <div class = "page-content"> <div class = "content-block"> <h2>My Blog</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> </div>
让我们执行以下步骤，看看上面给出的代码如何工作 : 去;
将上述HTML代码保存为服务器根文件夹中的 framework7_environment.html 文件.
将此HTML文件打开为http://localhost/framework7_environment.html，输出显示如下.
当您单击导航栏时，它将显示带有自定义消息的警告框.
