入门前需要知道的一些知识
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
页面切换,例如: ,会切换为 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
---
引用:
_includes目录保存被保存的东西 {% include header.html %}
注意:
创建一个页面时,需要注意 id 必须为 page-nav-bar-labels (同意目录下ID不能出现重复)