vue项目常用的是 vue-cli+webpack; 但是有些情况下并不适合; 只能使用采用script标签引入的方式进行代码编写, 但是这样的话组件方面用起来不怎么方便! 现在前端还有什么模块框架,最后我采用了seaJs配合vue.js模仿vue-loader! 我们使用vue-loader的时候采用的是 单个的 .vue 文件; 采用seaJs的话每一个组件就是一个js文件!

我们看下项目目录!

Common 文件夹下用来放置同用的静态资源; 其中template 文件夹我放置的是全局多次使用的组件封装成的模板! Fuwuqi 文件夹是我自己用node搭建的一个本地服务器 具体参考我的服务器的文章; Page文件夹 就相当于vue-cli中的src文件夹; 里面每一个文件夹相当于是一个页面的.vue文件! Index.html文件 是页面的入口文件;

实现原理: 采用vue.extend(); 方法实例化一个组件, 采用seaJs 的模块化对外开放组件的接口!具体看代码;

代码分析: Index.html 中的代码分析:

App.js代码:

define(function (require, exports, module) {  var    routes = [ //配置路由路径!      {path: '/', component: require(page/index/index')}, // 引入组件作为路由的资源文件!      {path: '', component: require(page/test/test')} // 引入组件作为路由的资源文件!    ],    router = new VueRouter({ //实例化vue-router;      routes: routes    }),    select = require('select'), // 引入select 组件 相当于 import select from  'select.vue';    app = new Vue({ //实例化vue      name: 'vm',      router: router, //在实例中注入路由;      components:{ //注册组件!        myselect:select      }    }).$mount('#app');});

下面我们看一下页面组件index的文件夹

分为两个文件 一个是html文件. 一个是js文件! Html文件 想当于.vue文件中template中的内容:

    
    
     
        
      
欢迎使用 seaJs+vue
    
     
    

在看一下index.js 文件:

define(function(require,exports,module){  var html = require(page/index/index.html'),    index = Vue.extend({      template:html,	data:function(){	return{	}	},	methods:{	}    });  module.exports = index;});

使用Vue.extend;函数实例化一个组件; html 是seaJs-text插件引入的html文本; 其他的data, methods 之类的就像.vue文件中的写法一样 不过最好使用es5的语法! 最后在使用seaJs的模块将index 作为对外的接口; 在路由中就可以接收到了这个组件!

然后我们在本地服务器下运行项目; 就可以看到:

关于css文件, 只能是自己写一个css文件 然后在index.html中link进来了, 暂时还没有好的方法!