SMTC：Vue Single Js Component Manager

摘要： 前言 Vue 的單檔案元件（Single File Component）看著十分誘人，But 必須要上 webpack 心有不甘，搗騰一番就有了這個 Vcm (Vue Single Js Component Manager) 不需要 webpack / npm / n...

前言

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/pathhttp://vcm.demo/path/js/vcm
基準路徑'/'http://vcm.demo/pathhttp://vcm.demo/path
根路徑　'//'http://vcm.demohttp://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 $urijs檔案路徑 (參考上一節 路徑)
 * @param $domdom引用 單例元件將被插入到哪個dom節點下 (預設為 document.body)
 */
Vcm.singleton($name, $uri, $dom);

/**
 * 全域性元件
 * @param $tag html標籤名
 * @param $uri js檔案路徑 (參考上一節 路徑)
 */
Vcm.global($tag, $uri);

/**
 * 區域性元件
 * @param $uri js檔案路徑 (參考上一節 路徑)
 */
Vcm.local($uri);

/**
 * 元件內引用子元件
 * @varcomponent js元件例項
 * @param $urijs檔案路徑 (參考上一節 路徑)
 */
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.localVcm.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