vue2.0+seajs开发

vue官方推荐使用webpack+vue-cli开发Vue项目 但是在我在webpack npm run dev 打包后没有解决好如何打包成apk的问题。所以就无奈的使用的seajs了。点击进入seajs官网

文章垃圾勿喷！！！

一、seajs简单介绍

seajs使用方法

1、下载"seajs-text.js"和"seajs-css.js"并在页面引用，因为seajs不支持引用html和css。
2、在 hello.html 页尾，通过 script 引入 sea.js 后，有一段配置代码：

// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})
// 加载入口模块
seajs.use("../static/hello/src/main")

sea.js 在下载完成后，会自动加载入口模块。页面中的代码就这么简单。(main.js即入口文件)

2、seajs语法规范

Sea.js 遵循 CMD 规范，可以像 Node.js 一般书写模块代码。使用require进行模块间的引用

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var A = require('./a');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

上面就是 Sea.js 推荐的 CMD 模块书写格式。如果你有使用过 Node.js，一切都很自然。

二、项目开始

目录结构

css
images
js

about
user
...
main.js
seajs

lib
router
view
index.html

其实目录还是很乱的

main.js入口文件

define(require,exports,moudle){
//通过require引用路由文件
    var Router = require("../router/router");
//定义路由对象
    var router = new VueRouter({
        history: true,
        routes:Router.router    
    });
//创建Vue实例
    var app = new Vue({
        el:'#app',
        router:router,
        store:store
    });
}

router.js文件

define(require,exports,moudle){
//引用home组件
    var app=require("home");
    var router = [
        {
            path: '/',
            name: 'index',
            component: app.app
        }
    ]
    //向外暴露Router接口 
    exports.router = Router;
}

home.js

define(function(require,exports,moudle){
//引用html文件
    var temp=require("../views/home.tpl");
//引用首页组件
    var index=require("index");
//引用底部组件
    var footerCom=require("components/footerCom");
    var app={
        data:function(){
            return{
            }
        },
        template:temp,
        components:{
            "index":index.index,
            "footercom":footerCom.footerCom
        }
        
    }
    exports.app=app
})

home.tpl模板

<div>
    <index></index>
    <footercom></footercom>
</div>

index.tpl模板

<div>
    <header id="header" class="mui-bar mui-bar-nav header">
        <h1 class="mui-title header_tit" id="tit">***</h1>
    </header>
<div>