轉載請註明原文地址：http://www.cnblogs.com/ygj0930/p/8430443.html

一：下載Framework7

1:npm安裝

npm install framework7

2:github下載

https://github.com/framework7io/framework7

二：文件解釋

如圖：下載完成後，打開F7項目目錄，可以看到很多東西。

我們只需要用到 dist/js 和 dist/css 目錄下的文件。

1:css

2:js

三：官方Demo：kitchen-sink

上圖中的ketchen-sink是官方項目Demo，我們可以基於它作修改來開發自己的項目。

對於css、js的引用；App初始化；項目目錄結構等都可以參閱Demo的做法。

四：搭建自己的項目

1:創建web項目

2:新建一個framework7目錄，拷貝Framework7項目中dist目錄下的js、css目錄到該目錄

3:在項目自身的css、js目錄下，文本新建 my-app.css\my-app.js，來自定義樣式與js。

4:創建fonts目錄，存放字體樣式文件

5:創建pages目錄，用於存放除首頁外的app頁面文件

6:在根目錄新建index.html（這是App首頁，按照官方模版格式來創建）

五：項目開發

項目目錄結構搭建起來後，就是對項目內容進行開發了。主要包括以下四個部分進行開發：

1:index.html

定義App的首頁，在該文件中負責引入F7的css、js文件、引入自定義的css、js文件；

定義App的主要頁面框架結構。

2:定義my-app.js

在my-app.js中進行App應用的初始化、頁面註冊、路由配置等。

3:定義my-app.css

在my-app.css中定義自己想要的樣式。(不常用)

4:其他頁面文件開發

在pages目錄下，定義除首頁外的頁面文件。

其他頁面主要是App內容頁，不需要再定義head部分、不需要引入css、js文件等，只需要使用div搭建搭建頁面內容即可。

使用Framework7開發步驟教程