sui-mobile框架入门一

入门前需要知道的一些知识

1、使用 nodejs 安装 grunt-cli（安装 grunt 客户端)，grunt是前段开发构建工具

2、认识 grunt 配置 ：任务配置grunt.initConfig、插件加载grunt.loadNpmTasks、任务注册代码grunt.registerTask

3、h5 、 js 、 css 

下载源代码：https://github.com/sdc-alibaba/SUI-Mobile

跑起服务：进入 SUI-Mobile 代码目录，即 Gruntfile.js 所在的目录，1、执行 grunt；2、执行 grunt server；

        说明：这样就可以跑起项目了。

        现在来看一下 grunt server 命令会执行 ['dist', 'jekyll', 'connect', 'watch'] 这些操作，

        grunt.registerTask('server', ['dist', 'jekyll', 'connect', 'watch']);

       直接查看 connect 操作（插件的配置自己去看）：

       connect: {
            site: {
                options: {
                    base: '_site/',
                    hostname: '0.0.0.0',
                    livereload: true,
                    open: true,
                    port: 8000
                }
            }
        }

查看使用的路径，docs为我们编写代码的放置位置，js为sui插件位置，docs/assets为存放我们代码的静态文件和js存放的位置：  

       grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Metadata.
        meta: {
            distPath: dist,
            doclessetsPath: 'docs/assets/',
            docsDistPath: 'docs/dist/',
            docsPath: 'docs/',
            jsPath: 'js/',
            lessPath: 'less/'
        },

开发规则，已demo文件夹说明，必须对应一个 docs/assets/js/demo.js

页面切换，例如： <a href="/demos/bar/title-bar" class="item-link item-content">，会切换为 docsPath/demos/bar/title-bar.html

     docsPath/demos/bar/title-bar.html 代码：  其中 layout 为配置的 模板，模板保存在  docsPath/_layouts 文件下，title 会被传到 docsPath/_layouts/demo.html 中

可以使用 {{ page.title }}  进行获取

 ---
layout: demo
title: SUI Mobile Demo
---
<div id="page-title-bar" class="page">
  <header class="bar bar-nav">
    <h1 class="title">标题</h1>
  </header>
  <div class="content">
    <div class="content-padded">
      <p>
        只有文案的标题栏，<a class="back" href="/demos/bar">返回</a>
      </p>
    </div>
  </div>
</div>

引用：
_includes目录保存被保存的东西   {% include header.html %}

注意：

创建一个页面时，需要注意 id 必须为 page-nav-bar-labels  (同意目录下ID不能出现重复)
<a href="/demos/bar/nav-bar-labels" class="item-link item-content">