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

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