SMTC：Vue Single Js Component Manager

摘要：前言的单文件组件看着十分诱人，必须要上心有不甘，捣腾一番就有了这个不需要也能轻松愉快的用上单文件组件主要针对轻度使用场景，快速应用大型应用，专业前端，工程化前端还是更好快速入门单例组件是一种特殊的全局组件，和插件有点相似，只不过插件可以有更

Vue 的单文件组件（Single File Component）看着十分诱人，But 必须要上 webpack
心有不甘，捣腾一番就有了这个 Vcm (Vue Single Js Component Manager)
不需要 webpack / npm / nodejs 也能轻松愉快的用上 单JS文件组件

Vcm 主要针对轻度使用场景，快速应用
大型应用，专业前端，工程化前端 还是 webpack 更好 :P

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 本身

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 节点下