SMTC：Vue Single Js Component Manager

1次阅读

共计 2777 个字符，预计需要花费 7 分钟才能阅读完成。

前言
Vue 的单文件组件（Single File Component）看着十分诱人，But 必须要上 webpack 心有不甘，捣腾一番就有了这个 Vcm (Vue Single Js Component Manager) 不需要 webpack / npm / nodejs 也能轻松愉快的用上单 JS 文件组件
Vcm 主要针对轻度使用场景，快速应用大型应用，专业前端，工程化前端还是 webpack 更好 :P
GitHub
https://github.com/FractalDev/Vcm
快速入门
单例组件
是一种特殊的全局组件，和 Vue 插件有点相似，只不过 Vue 插件可以有更多其他功能
Vcm 会保证只生成一个实例，不需要额外代码
单例组件 export 方法注册到 Vue.prototype，所有组件实例都可直接访问到
最常见的使用场景就是弹框信息组件

单例组件 / 全局组件 / 局部组件定义，定义方式基本完全一样
// 创建单 JS 组件实例
let component = Vcm.create();
// 这个就是 new Vue() 的参数
component.options = {
// 平常怎么写，就怎么写
// 按 Vue 文档，组件的 data 必须是个函数
data : function(){
return {};
},
}
// 组件样式，字符串或者数组
component.style = [
];
// 定义单例组件导出方法，单例组件有这部分，全局组件 / 局部组件没有
component.export = {
method : function(){}，
};
html 文件内
// 单例组件
Vcm.singleton(‘$singleton’, ‘js/vcm/singleton.js’);
// 全局组件
Vcm.global(‘global’, ‘js/vcm/global.js’);

let app = new Vue({
el : ‘#app’,
data : {},
components : {
// 局部组件
‘local’ : Vcm.local(‘js/vcm/local.js’),
},
});
组件内引入子组件
// js/vcm/local.js
components : {
// 这里用的是相对于当前组件（js 文件）的相对路径
‘local-sub’ : component.local(‘sub.js’),
// 这里用的是相对于页面的相对路径，路径部分下面会有详细文档
‘local-base’ : Vcm.local(‘local-base.js’),
},
技术细节
1 依赖
只需要 Vue 和 axios 两个库和 Vcm 本身
<script src=”js/axios-0.19.0.js”></script>
<script src=”js/vue-2.6.8.js”></script>
<script src=”js/vcm.js”></script>
2 路径
页面文件 : http://vcm.demo/path/index.html
基准路径 : http://vcm.demo/path
根路径 : http://vcm.demo
组件文件 : http://vcm.demo/path/js/vcm/test.js
引入 JS 组件文件时支持以下路径方式：

前缀 Vcm 方法 singleton/global/local 组件方法 local
相对路径 ” http://vcm.demo/path http://vcm.demo/path/js/vcm
基准路径 ‘/’ http://vcm.demo/path http://vcm.demo/path
根路径 ‘//’ http://vcm.demo http://vcm.demo

绝对路径 ‘http://domain/path/absolute.js’ 不做转换，直接使用
Vcm 方法 singleton/global/local
‘js/vcm/foo.js’ => http://vcm.demo/path/js/vcm/foo.js
‘/js/vcm/foo.js’ => http://vcm.demo/path/js/vcm/foo.js
‘//js/vcm/foo.js’ => http://vcm.demo/js/vcm/foo.js

‘http://domain/path/absolute.js’ => ‘http://domain/path/absolute.js’
组件方法 local (组件 js 路径 http://vcm.demo/path/js/vcm/test.js)
‘foo.js’ => http://vcm.demo/path/js/vcm/foo.js
‘/foo.js’ => http://vcm.demo/path/foo.js
‘//foo.js’ => http://vcm.demo/foo.js

‘http://domain/path/absolute.js’ => ‘http://domain/path/absolute.js’
3 单例组件 / 全局组件 / 局部组件 / 子组件引入方式
/**
* 单例组件
* @param $name 变量名，被注册到 Vue.prototype
* @param $uri js 文件路径 (参考上一节路径)
* @param $dom dom 引用单例组件将被插入到哪个 dom 节点下 (默认为 document.body)
*/
Vcm.singleton($name, $uri, $dom);
/**
* 全局组件
* @param $tag html 标签名
* @param $uri js 文件路径 (参考上一节路径)
*/
Vcm.global($tag, $uri);
/**
* 局部组件
* @param $uri js 文件路径 (参考上一节路径)
*/
Vcm.local($uri);
/**
* 组件内引用子组件
* @var component js 组件实例
* @param $uri js 文件路径 (参考上一节路径)
*/
component.local($uri);
4 引入子组件的两种方法
页面 URL : http://vcm.demo/path/index.html
组件 JS URL : http://vcm.demo/path/js/vcm/local.js