vue2.0+seajs开发

wangtdgoodluck 发布于2019-08-20 14:17 / 644人阅读

摘要：官方推荐使用开发项目但是在我在打包后没有解决好如何打包成的问题。在页尾，通过引入后，有一段配置代码的简单配置加载入口模块在下载完成后，会自动加载入口模块。即入口文件语法规范遵循规范，可以像一般书写模块代码。

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模板

index.tpl模板

***

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81518.html

sea.js

摘要：目标了解目前公司所用得代码模块式开发。比较目前比较流行得框架。模块化可以让每个文件的职责单一，非常有利于代码的维护。模块定义规范与的模块规范非常相近。一类是以国内的等类库为代表的大教堂模式。目标：1.了解目前公司所用得sea.js,代码模块式开发。 2.比较目前比较流行得bootstrap,angularJS,reactJS框架。参考：http://seajs.org/docs/...

renweihub 2019-08-19 17:48 评论0 收藏0
seajs和requirejs的那些事儿

摘要：遵循的是异步模块定义规范，遵循的是通用模块定义规范。规范的不同，导致了两者的不同。在尝试让第三方类库修改自身来支持，目前只有少数社区采纳。是没有明显的，是明显没有。无这方面的支持。发布之后发现存在一个显示的问题，大家可以移步到我的简书参考，谢谢大家！！！我的简书《seajs和requirejs技术指导文档》昨天到今天，老衲翻阅数十篇技术文档，为了搞明白seajs（CMD）和 req...

zorpan 2019-08-22 10:44 评论0 收藏0
seajs 源码解读

摘要：本文主要简单地解读一下的源码和模块化原理。其中，是这次源码解读的核心，但我也会顺带介绍一下其他文件的作用的。对代码比较简单，其实就是声明一下全局的命名空间。然而，真正的核心在于处理模块依赖的问题。 seajs 简单介绍 seajs是前端应用模块化开发的一种很好的解决方案。对于多人协作开发的、复杂庞大的前端项目尤其有用。简单的介绍不多说，大家可以到seajs的官网seajs.org参看...

LiangJ 2019-08-19 14:40 评论0 收藏0
使用seajs进行模块管理

摘要：一类是以国内的等类库为代表的大教堂模式。在大教堂模式下，所有组件都是颗粒化模块化的，各组件之间层层分级环环相扣。在集市模式下，所有组件彼此独立职责单一，各组件通过组合松耦合在一起，协同完成开发兼容性持续更新中。。。前端模块化开发的价值解决命名冲突我们做项目是常常会做一些通用功能的封装,封装成一个个的函数,然后保存在一个名叫util.js的文件中.这种情况就很有可能在另一个开发人员...

saucxs 2019-08-19 17:36 评论0 收藏0
JavaScript_模块化

摘要：默认会有三个参数，，也可以接受两个以上的参数，字符串表示模块标识。获取模块的接口调用模块中的定义方法模块内部异步加载模块，并在加载完成后执行指定的回调函数。对象，这种方式可以将模块内部多个属性多个方法暴露出来。是在自己模块的作用域中。 JS开发的问题冲突依赖 JS引入的文件,产生依赖. 使用命名空间解决：命名空间的弊端调用的时候名字比较长. 只能减低冲突，不能完全避免 ...

dkzwm 2019-08-19 18:34 评论0 收藏0