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

Vue 的單文件組件（Single File Component）看著十分誘人，But 必須要上 webpack
心有不甘，搗騰一番就有了這個(gè) Vcm (Vue Single Js Component Manager)
不需要 webpack / npm / nodejs 也能輕松愉快的用上 單JS文件組件

Vcm 主要針對輕度使用場景，快速應(yīng)用
大型應(yīng)用，專業(yè)前端，工程化前端 還是 webpack 更好 :P

https://github.com/FractalDev/Vcm

單例組件

是一種特殊的全局組件，和 Vue 插件有點(diǎn)相似，只不過 Vue 插件可以有更多其他功能
Vcm 會(huì)保證只生成一個(gè)實(shí)例，不需要額外代碼
單例組件 export 方法注冊到 Vue.prototype，所有組件實(shí)例都可直接訪問到
最常見的使用場景就是 彈框信息組件

單例組件 / 全局組件 / 局部組件 定義，定義方式基本完全一樣

// 創(chuàng)建單JS組件實(shí)例
let component = Vcm.create();
// 這個(gè)就是 new Vue() 的參數(shù)
component.options = {
    // 平常怎么寫，就怎么寫
    // 按 Vue 文檔，組件的 data 必須是個(gè)函數(shù)
    data : function(){
        return {};
    },
}
// 組件樣式，字符串 或者 數(shù)組
component.style = [
];
// 定義 單例組件 導(dǎo)出方法，單例組件 有這部分，全局組件 / 局部組件 沒有
component.export = {
    method : function(){}，
};

html 文件內(nèi)

// 單例組件
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"),
    },
});

組件內(nèi) 引入 子組件

// js/vcm/local.js
components : {
    // 這里用的是相對于當(dāng)前組件（js文件）的相對路徑
    "local-sub" : component.local("sub.js"),
    // 這里用的是相對于頁面的相對路徑，路徑部分下面會(huì)有詳細(xì)文檔
    "local-base" : Vcm.local("local-base.js"),
},

1 依賴

只需要 Vue 和 axios 兩個(gè)庫 和 Vcm 本身

2 路徑

頁面文件 : http://vcm.demo/path/index.html
基準(zhǔn)路徑 : http://vcm.demo/path
根路徑　 : http://vcm.demo
組件文件 : http://vcm.demo/path/js/vcm/test.js

引入 JS 組件文件時(shí)支持以下路徑方式：

           前綴    Vcm 方法 singleton/global/local  組件方法 local
相對路徑     ""     http://vcm.demo/path            http://vcm.demo/path/js/vcm
基準(zhǔn)路徑    "/"     http://vcm.demo/path            http://vcm.demo/path
根路徑　   "http://"     http://vcm.demo                 http://vcm.demo

絕對路徑   "http://domain/path/absolute.js" 不做轉(zhuǎn)換，直接使用

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文件路徑 (參考上一節(jié) 路徑)
 * @param $dom  dom引用 單例組件將被插入到哪個(gè)dom節(jié)點(diǎn)下 (默認(rèn)為 document.body)
 */
Vcm.singleton($name, $uri, $dom);

/**
 * 全局組件
 * @param $tag html標(biāo)簽名
 * @param $uri js文件路徑 (參考上一節(jié) 路徑)
 */
Vcm.global($tag, $uri);

/**
 * 局部組件
 * @param $uri js文件路徑 (參考上一節(jié) 路徑)
 */
Vcm.local($uri);

/**
 * 組件內(nèi)引用子組件
 * @var   component js組件實(shí)例
 * @param $uri      js文件路徑 (參考上一節(jié) 路徑)
 */
component.local($uri);

4 引入子組件的兩種方法

頁面URL    : http://vcm.demo/path/index.html
組件JS URL : http://vcm.demo/path/js/vcm/local.js

1. 組件實(shí)例方法   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 各自被創(chuàng)建并插入到 HEAD 節(jié)點(diǎn)下