var-admin

VAR-ADMIN

Vue\Angular\React

readme

基于SystemJS，使用VueJS编写基座的微前端Demo。如果是内部使用的中后台系统，第一次加载资源的时间漫长是可以忍受的，而且内部网络速度按常理是比较快的。如果确实有需要，也是可以优化（按照优化手段，是可以渐进增强的，毕竟说到底还是三驾马车在跑）。

以微件为单位构建应用；
无须webpack打包；
开发时可以单独用相关脚手架工具，热替换这类的丝滑开发体验一样不少。
在线babel转译ES7（async/await）；
支持.vue单文件；
支持less在线编译；
支持IE11；
使用Koa2+webpack实现基座HRM开发。

关键 > DOM.replace(“#app”,ApplicationInstance)=》先占位模块再替换（web开发基本操作）

你要问有什么意义，可能就只是————我喜欢:) 在线编辑，提交即部署。

bootstrap

 "scripts": {
   /* git push 之后调用,修改资源缓存版本号 */
    "changeversion": "node ./config/pre/changeversion.js",
    "git:pull": "git pull && git pull gitee master && git pull coding master",
    "git:push": "npm run changeversion && git push && git push gitee master && git push coding master",
    "lint": "eslint . --ignore-path .eslintignore",
    "lint:fix": "eslint --fix . --ignore-path .eslintignore",
    /* 基座相关，产出main.js */
    "build": "cross-env NODE_ENV=production webpack --progress --profile --config config/index.js --json > stats.json",
    /* koa HRM 可以添加api：比如本地开发可以修改菜单menu.json, /api/menu */
    "start": "node server.js",
    "start:s": "cross-env NODE_ENV=development nodemon server.js",
    "serve": "cross-env NODE_ENV=production PORT=10080 pm2 start server.js -i 4 --name koa-webpack-example --merge-logs --log-date-format='YYYY-MM-DD HH:mm Z' && pm2 save 2> /dev/null",
    /* vue-cli 开发微件 */
    "vue:s": "vue-cli-service serve",
    "vue:b": "vue-cli-service build",
    /* vue-cli 打包libary UMD 通过懒加载JS资源 */
    "vl": "vue-cli-service build --target lib --name vlibs --dest public/static/vlibs src/index.libs.js "
  },

参考

Error

rollup : 无法加载文件 **rollup.ps1。
- Restricted 执行策略不允许任何脚本运行。
- AllSigned 和 RemoteSigned 执行策略可防止 Windows PowerShell 运行没有数字签名的脚本。
less javascriptEnable

loadLess({url:”“,id:”“,content:””}) 如果有url 加载url 添加 style块 id=less${id},如果是content,直接编译content

$loadLess(“static/style/less/Shell.less”);

set-executionpolicy remotesigned

缓存开发版本的main.js HRM导致重复刷新

说明

实际运行是public下的文件，部署所需

package

npm i -g webpack webpack-cli
npm i extract-text-webpack-plugin@next
npm i -S vue-highlightjs monaco-editor
yarn add -D webpack webpack-cli
yarn add -D stylus stylus-loader confman vue-loader vue-template-compiler stylus stylus-loader postcss-loader postcss-flexbugs-fixes

~~node-sass sass-loader~~安装失败神烦，弃之。less在线编译不香吗？gitee的webIDE，提交就是部署不香吗？要用你node-sass？？

生成vue组件的vs code插件

~~generatevuecomponent~~

（瘦）基座开发

全局变量 main whiteList version isloadMain _main

应该更通用，_：

_.$全局方法 _.$$单例 _.lodash自有方法

路由分发

md5路径

Utils

约定

loadJS的作用是加载js使之运行
- 从remote获取 add script
- 或者indexedDB缓存 get and eval
resolvePath 的处理流程
- 约定以static开头
lazyLoadComponent 的处理流程
- Blobfetch =》 blob =》 text =》 replace
- w3c-Blob

md5

在相同的目录下 resolvePath以static为前缀

通信系统

管理应用机制通信机制劫持 $iframe

page 业务页面

test 测试、展示页面

文档

TEMPLATE_PLACEHOLDER ; VueLoader 方便替换字符串，妥协的写法。

修改了加载过程，主要是Vue单文件的字符串拼接。
- public\static\lib\systemjs\system.src.js
- public\static\lib\systemjs\extras\transform.js

~~- idb-keyval~~在IE上报错，兼容性不好

hash 升级

req.end is not function node_modules\webpack-hot-middleware\middleware.js

req.on('close', function () {
  console.error("close")
  if (!res.finished) res.end && res.end();
  delete clients[id];
});

axios 拦截封装

403 权限
- 跳转退出逻辑（清除敏感信息）
超时

EventBus 全局通信：messageBox not

缓存

[] 懒加载CDN路径问题??

缓存逻辑

需要重新设计一下
自动生成文档可以了解一下
主要还是考虑版本号的问题

mini是每次访问页面都需要更新的，要求绝对没有缓存； mini版本号没有变动，直接读取缓存版本号有变动，除了白名单上的全部清除；（全部清除，白名单版本号没有变动再恢复回来）

_.$$STORE_V
- systemjs_version
- systemjs
- systemjs_translated

如果有耕细粒度的缓存，可以配置映射表，为每一个需要缓存的文件单独设置版本号

fetch是否有兼容性问题？=>XMLHttpRequest 回退到ajax版本

除了main.js 静态资源缓存=》手动维护？！

system.src.js

_.$$STORE
localForage

缓存分级别 A:大，最不容易变，如babeltransformjs antdesign element-ui=》单独处理独立版本号 B:大小一般容易变，业务代码如Login.vue =》一起处理统一本版本号

对比版本 STATIC_RES_VERSION
1. 不同就清空加入版本信息
2. id get
  1. 有直接输出
  2. 没有
  3. fetch
  4. set

通知处理

messageBox

ant

                EventBus.emit("notification_error", {
                    message: "Unauthorized",
                    description: "权限认证失败"
                });

重定向问题

页面Title

window.__webpack_public_path__ = parentUrl + "static/lib/bundle/";

媒体查询

$loadCSS($resolvePath(“static/css/css.css”))

零碎不可复用的补丁式样式

localStorage Event

登入登出通信，同一个域下的统一处理监听EventBus localStorage通知监听

## /* Vue 特有 vue-antdv*/ _.$loadComponentByURL = url => {

};

[vue-ls](https://github.com/RobinCK/vue-ls#readme)

别名@@ 路径

    var PATH_PREFIX = window.APP_CONFIGS.PATH_PREFIX;
    var regEx = new RegExp("^@@/" + PATH_PREFIX, "g");
    if (regEx.test(relUrl)) {
      return relUrl.substring(3);
    }

路径的处理绝对相对远程文件//存疑

Route change tab之间的跳转

SHELL 全局 root 实例

PAGE_*单例

字典懒加载模块

var-router

侧边栏展示信息只是用来管理

Shell.vue mounted
MainSideBar getMenu trigger “menus-loaded”
MainSidebarSubmenu created

EventBus.off(“menus-loaded”);

[ ] zong [ ] 首屏加载资源的进度 [ ] less 在线加载 [ ] babel jsx扩展

码表的缓存

zangodb

window.webpack_public_path = ${parentUrl}${PATH_PREFIX}/lib/bundle/;

菜单编辑

modify_menu

文档

接口数据提供的数据有固定的字段比如id label children 面向接口编程，在不同的组件有具体的上下文，约定字段有利于解耦

加载，进度

文档的读写

开发模式下，本地服务可以读取
在线模式下，可以通过Gitee或者Github开放的API读写文件，commit

currentScript 可以获取路径

   currentScript: function (window) {
                    var document = window.document;
                    return document.currentScript || (function () {
                        var scripts = document.getElementsByTagName("script");
                        return scripts[scripts.length - 1];
                    })();
                }

less 获取less代码文本之后调用的方法在哪里？

VarContainer 与 VarChild

VarChild必须直接被VarContainer包含

      children: [
        { iAm: "init", component: D3Main },
        { iAm: "scale", component: D3Scale },
      ],

  <VarContainer>
    <VarChild :iAm="child.iAm" v-for="child in children" :key="child.iAm">
      <div :is="child.component" />
    </VarChild>
  </VarContainer>

switch_page 生成下拉，用于切换不同的子页面

markdown hightlight

hightlight

This site is open source. Improve this page.