vue+seaJS 模仿vue-loader

2019独角兽企业重金招聘Python工程师标准>>>

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 中的代码分析:

<div id="app"> <!-- 确定vue的作用域 -->
<router-view></router-view> <!-- vue 的路由页面入口标签-->
</div>
<script src="common/js/sea.js"></script> <!-- 引入seaJs -->
<script src="common/js/vue.js"></script>
<script src="common/js/vue-router.js"></script>

<script>
 seajs.config({ // seaJs 的配置
   base: " /vscode/vue-seaJs", //页面默认的根目录
   charset: 'utf-8', // 编码方式
   alias: {'jquery': 'common/js/jq.js', // 文件路径配置
           'checkbox':'common/template/checkbox.js', // 这里是我使用vue + seaJs 封装的一个 checkbox 录入框的组件!
           'select':'common/template/select.js' // 这里是我使用vue + seaJs 封装的一个 select 录入框的组件!
   },
   // preload 这里可以配置页面需要的js文件路径 seaJs会自动加载 这里加载seaJs-tex:  用来加载html文件时用到它!
   preload: ["common/js/seajs-text"]
 });
 seajs.use(["common/js/app.js"]); //调用app.js,它是页面的入口js文件!
</script>

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中的内容:

<div>
    <div class="welcome">
        <h1 class="welcome-text">欢迎使用 seaJs+vue</h1>
    </div>
</div>

在看一下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进来了, 暂时还没有好的方法!

转载于:https://my.oschina.net/u/3105272/blog/983515