此项目是根据本人公司项目的要求搭建的,也许适用于很多其他的大部分项目。
准备好gulp环境
首先可以使用gulp创建项目,配置一下gulpfile.js文件,我把gulpfile.js放于根目录下
具体配置以及安装命令方法参见这里
我的项目目录
我的项目目录是这样:
==build //项目构建目录 | html //html文件目录 | images //图片文件目录 | javascripts //javascript文件目录 | libs //js库文件 | stylesheets //样式文件目录 ==gulpfile.js
在程序中使用的avalonjs可以在这里看到,同时s使用了mmRouter主要的文件如下
当你看到下面的时候会发现有个slideout.js文件,这是我们移动端用的侧边栏,我是拿别人的代码改来自己用,参见这里
main.html
build 目录下
<!DOCTYPE html> <html ms-controller="main"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta name="format-detection" content="telephone=no, email=no"/> <meta name="fragment" content="!"/> <link rel="stylesheet" href="stylesheets/normalize.css"/> <link rel="stylesheet" href="stylesheets/sildeout.css"/> <script src="avalon.mobile.min.js" data-main="javascripts/main"></script><!-- 这里引入最重要的js --> <title>柏小生</title> </head> <body> <nav id="BXS_menu"><!-- 这里是我们的菜单 --> <a href="#!/" ms-click="slideoutClose">home</a> <a href="#!//test" ms-click="slideoutClose">test</a> </nav> <div id="BXS_main" ms-click="slideoutClose"> <div ms-view></div><!-- 所有的页面都会在这里显示(当然除了菜单栏) --> </div> <script src="javascripts/libs/slideout.js"></script><!-- 引入的侧边栏插件 --> <script> var slideout = new Slideout({ 'panel': document.getElementById('BXS_main'), 'menu': document.getElementById('BXS_menu'), 'padding': 220, 'tolerance': 85 }); </script> </body> </html>
avalon.mobile.min.js在build目录下
主要的main.js
build/javascripts 目录下
require.config({//配置avalonjs baseUrl: 'javascripts',//基础路径 paths: { avalon: '../avalon.mobile.min.js' }, shim: { avalon: { exports: 'avalon' } }, debug: false }); require(['avalon', 'ready!', 'libs/mmState'], function (avalon) { console.log(avalon); //定义顶层的VM avalon.define({ $id: 'main', slideoutClose: function() { slideout.close(); } }); //定义各种状态,内部会转换为一个路由表,交由mmRouter去处理 avalon.state('index', { controller: 'main', url: '/', views: { '': { templateUrl: 'templates/index.html' //templates下的index.html片段 } }, onBeforeEnter: function() { require(['index'], function(index) { index.init(); }); }, onError: function(err) { avalon.log(err); } }); avalon.state('test', { controller: 'main', url: '/test', views: { '': { templateUrl: 'templates/test.html'//templates下的test.html片段 } }, onBeforeEnter: function() { require(['test'], function(test) { test.init(); }); }, onError: function(err) { avalon.log(err); } }); //启动历史管理器 avalon.history.start({ basepath: '/app' }); //开始扫描 avalon.scan(); });
路径build/templates以下两段为html片段
index.html片段
<div ms-controller="index" id="index"> <p ms-text="testName"></p> </div>
test.html片段
<div ms-controller="test"> <p ms-text="testName"></p> </div>
libs文件
在libs下放了需要的js文件,包括mmState、mmHistory、mmRouter等
最后使用gulp命令生成assets目录
参考资料
https://github.com/gulpjs/gulp
https://github.com/baixiaosh/avalon
https://github.com/RubyLouvre/mmRouter
https://github.com/baixiaosh/slideout
如果本文有什么不对的地方,希望大神们指出,以免误导其他撸码哥,谢谢