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/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 會保證 單例元件 在 全域性元件 和 區域性元件 之前載入完成