首先,引入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'); });