This is simple application...
📅 最后修改于: 2020-10-25 02:45:45 🧑 作者: Mango
在本章中，我们将讨论如何安装和设置Framework7。
您可以通过两种方式下载Framework7-
您可以使用Bower安装Framework7，如下所示-
bower install framework7
成功安装Framework7之后，您需要按照以下给定步骤在应用程序中使用Framework7-
步骤1-您需要使用以下命令安装gulp-cli来构建Framework7的开发版本和发行版。
npm install gulp-cli
cli代表Gulp的Command Line Utility。
步骤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 App布局中使用–
它用于将Framework7 iOS CSS库包含到您的应用程序中。
它用于在您的应用程序中包含Framework7 iOS相关的颜色样式。
Android / Material App Layout中使用了以下CDN-
它用于将Framework7 JS库包含到您的应用程序中。
它用于将Framework7材质样式包含到您的应用程序中。
在本教程中，我们一直在使用CDN版本的库。我们使用AMPPS（AMPPS是Apache，MySQL，MongoDB，PHP，Perl和Python的WAMP，MAMP和LAMP堆栈）服务器来执行所有示例。
下面的示例演示了Framework7中简单应用程序的用法，当您单击导航栏时，它将显示带有自定义消息的警报框。
My App
//you can control the background color of the Status bar
Contents goes here...
接下来，再创建一个HTML页面，即envirmnt_about.html ，如下所示-
envirmnt_about.html
My Blog
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.
让我们执行以下步骤，看看上面给出的代码如何工作-
将以上HTML代码另存为服务器根文件夹中的framework7_environment.html文件。
以http：//localhost/framework7_environment.html格式打开此HTML文件，并显示如下所示的输出。
当您单击导航栏时，它将显示带有自定义消息的警报框。