摘要：前言的單文件組件看著十分誘人，必須要上心有不甘，搗騰一番就有了這個不需要也能輕松愉快的用上單文件組件主要針對輕度使用場景，快速應用大型應用，專業前端，工程化前端還是更好快速入門單例組件是一種特殊的全局組件，和插件有點相似，只不過插件可以有更

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://"     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
"http://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
"http://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 節點下