共计 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
1. 组件实例方法 component.local(‘sub.js’) => http://vcm.demo/path/js/vcm/sub.js
2. Vcm.local Vcm.local(‘sub.js’) => http://vcm.demo/path/sub.js
5 样式
目前只支持直接的 CSS 语法, scoped style 尚不支持
所有组件的 css 各自被创建并插入到 HEAD 节点下
<style type=”text/css” data-uri=” 这里是组件 JS 的绝对 URI，方便调试 ”>
6 加载 及 加载顺序
单 JS 组件的 js 都通过 ajax 进行异步加载
全局组件 和 局部组件 使用了 Vue 的异步加载机制
Vcm 会保证 单例组件 只有一个实例
Vcm 会保证 单例组件 在 全局组件 和 局部组件 之前加载完成
More
