关于sea.js的笔记

首先,引入sea.js:(注意要直接写在Script标签里,不要写在jquery的页面加载事件里)

seajs.config({
        base: "./" //seajs的基础路径(组织人事,元数据项目的模块)
            ,
        charset: 'utf-8',
        map: [
                [/^(.*.(?:css|js|html))(.*)$/i, '$1?v=_VERSION_' + '-' + '1.0']
            ] //加上版本号,清缓存用
            //公共路径
            ,
        paths: {
            
        }
    });

    seajs.use(["app.js"]);

然后在调用其它js的时候这样写:

define(function(require, exports, module) {
    var sTpl = require("views/company.html");

    var VueComponent = Vue.extend({
        template: sTpl,
        data: function() {
            return {
                class1: "modal fade in",
                index: 1,
                rows: 8,
                next: false,
                path: gMain.basePath,
                logo: ''

            };
        },
        ready: function() {
            this.getInfo()
        },
        methods: {
            getInfo: function() {
                var $url = gMain.basePath + 'api/company';
                var resource = this.$resource($url)
                resource.get({
                        pIndex: this.index,
                        pRows: this.rows
                    })
                    .then(function(response) {
                        var obj = eval('(' + response.data + ')');
                        if(obj.length == 0) {
                            this.show = true
                            this.next = false
                            this.$set('Complist', obj)
                        } else {
                            this.$set('Complist', obj)
                            if(this.index + 1 > obj[0].counts) {
                                this.next = false
                            } else
                                this.next = true
                        }
                    })
            },
            commit: function() {
                var title = this.title;
                var formData = new FormData($("#file")[0]);
                var result;
                $.ajax({
                    type: 'post',
                    dataType: "json",
                    async: false,
                    contentType: false,
                    processData: false,
                    url: gMain.basePath + "api/Company/PostFile",
                    data: formData,
                    success: function(data) {
                        result = data;
                    }
                })
                if(title == "新增") {
                    this.logo = result;
                    this.item.logo = this.logo;
                    var $url = gMain.basePath + 'api/Company/PostCompany';
                    var resource = this.$resource($url)
                    resource.save(this.item)
                        .then(function() {
                            this.getInfo();
                            this.$set('show', false);
                        })
                }
                if(title == "编辑") {
                    var b = document.getElementById("ed").src;
                    if(b.length > 100) {
                        this.logo = result;
                        this.item.logo = this.logo;
                    } else {}
                    var $url = gMain.basePath + 'api/Company/PutCompany';
                    var resource = this.$resource($url)
                    resource.update({
                            pId: this.item.company_id
                        }, this.item)
                        .then(function() {
                            this.getInfo();
                            this.$set('show', false);
                        })
                }
            },
            start: function(company) {
                var $url = gMain.basePath + 'api/company/PutCompanyStatus';
                var resource = this.$resource($url)
                resource.update({
                        pId: '2'
                    }, company)
                    .then(function() {
                        this.getInfo()
                    })
            },
            pause: function(company) {
                var $url = gMain.basePath + 'api/company/PutCompanyStatus';
                var resource = this.$resource($url)
                resource.update({
                        pId: '1'
                    }, company)
                    .then(function() {
                        this.getInfo()
                    })
            },
            loadItem: function(company) {
                this.$set('title', '编辑');
                this.$set('item', company)

            },
            addItem: function() {
                this.$set('title', '新增');
                this.$set('item', {})
            },
            cancle: function() {
                this.$set('show', false);
                this.$set('class1', 'modal fade');
            },
            nextpages: function() {
                this.index = this.index + 1
                this.getInfo()
            },
            addPic: function(e) {
                e.preventDefault();
                $('input[type=file]').trigger('click');
                return false;
            },
            previewFile: function() {
                var preview = document.querySelector('a.pict img');
                var rewrew = document.querySelector('input[type=file]').files[0];
                var reader = new FileReader();
                reader.addEventListener("load", function() {
                    preview.src = reader.result;
                }, false);
                if(rewrew) {
                    reader.readAsDataURL(rewrew);
                }
            }
        }

    });

    module.exports = VueComponent;
});

然后注意如果要引入html文件琢模板,需要介入sea-text.js文件。

附App.js的写法:

/**
 * Created by zackey on 2016/5/28.
 */
define(function (require,exports,module) {
    require("components/menu.js"); //导航
    require("components/loading.js"); //导航

    // 路由器需要一个根组件。
    var App = Vue.extend({});

    // 创建一个路由器实例
    var router = new VueRouter();

    // 定义路由规则
    router.map({
        '/': {
            component: function (resolve) {
                require.async(['modules/Index.js'],resolve);
            }
        },
            '/can': {
            component: function (resolve) {
                require.async(['modules/can.js'],resolve);
            }
        },
        '/task': {
            component: function (resolve) {
                require.async(['modules/task.js'],resolve);
            }
        },
        '/bar':{
            component:function(resolve){
                require.async(['modules/bar.js'],resolve);
            }
        },
        '/foo':{
            component:function(resolve){
                require.async(['modules/foo.js'],resolve);
            }
        },
        '/tool':{
            component:function(resolve){
                require.async(['modules/tool.js'],resolve)
            }
        },
        '/datas':{
            component:function(resolve){
                require.async(['modules/datas.js'],resolve)
            }
        },
        '/users':{
            component:function(resolve){
                require.async(['modules/users.js'],resolve)
            }
        },
        '/roles':{
            component:function(resolve){
                require.async(['modules/roles.js'],resolve)
            }
        },
        '/task_list':{
            component:function(resolve){
                require.async(['modules/task_list.js'],resolve)
            }
        },
        '/task_save':{
            component:function(resolve){
                require.async(['modules/task_save.js'],resolve)
            }
        },
        '/partner_list':{
            component:function(resolve){
                require.async(['modules/partner_list.js'],resolve)
            }
        },
        '/wx_menu':{
            component:function(resolve){
                require.async(['modules/wx_menu.js'],resolve)
            }
        },
        '/company':{
            component:function(resolve){
                require.async(['modules/company.js'],resolve)
            }
        }
    });
     //启动路由
    // 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。
    router.start(App, '#app');

});
原文地址:https://www.cnblogs.com/wpcnblog/p/7047965.html