Ismart-admin NPM

ismart-admin

本脚手架涉及vue全家桶、ivew4.0、single-spa、lodash、moment等相关知识点，请熟练掌握。本脚手架中的ismart目录为ismart开发者负责维护、开发，请非ismart开发者务必不修改，有问题及时反馈。

快速入门

构建主应用

git clone https://${username}:${password}@codeup.aliyun.com/5f82b62d93de78251872295f/yq/yq-admin-ui.git
npm install
npm run serve
git add . && git commit -m '' 会触发自动部署（非主应用开发者请勿提交）

构建子应用

git clone https://${username}:${password}@codeup.aliyun.com/5f82b62d93de78251872295f/yq/subapp-vue-template.git
更改package.json中的name，注意不要于已经存在的子应用名称冲突（root默认被占用）
npm install
npm run serve （若端口号被占用，请到vue.config.js中修改port）

接入主应用（主要用于开发）

打开1步骤clone的项目，找到microapps（/src/microapps/），复制（也可以直接更改）subapp-vue-template.js更改为你子应用的name（package.json中的name），将文件内的所有subapp-vue-template都替换成自己子应用的name，路由则按照routes.js（/src/routes.js）中的文档进行配置，注意route的name和path要切记不要重复命名，设置async为true则不会显示，必须在系统的菜单功能中配置并分配权限才会显示，开发环境建议设置为false，或者前往config中把route（/src/config/route.js）中的async设置为false
配置代理，vue.config.js 中找到proxy字段，同样复制'/subapp-vue-template-dist'的配置，改成自己的子应用name和端口号
注意由于主应用与子应用公用同一个Vue原型，因此在主应用中绑定在Vue.prototype也一样会影响子应用，反之亦然，目前受影响的有axios、hasAuthority（接入主应用后，axios会默认使用主应用的，解决方案请参考hasAuthority的处理），另外主应用通过window额外提供root属性，该属性为主应用根实例，可以通过root使用主应用的store和router等

部署子应用

云效添加代码仓库
推送代码
复制子应用自动化构建部署流水线
进入编辑流水线页面找到源并更改代码源；找到构建上传并更改oss上传中的Bucket Folder路径${name}-dist
git add . && git commit -m '' 会触发自动部署（非子应用开发者请勿提交）
访问http://yq-admin-ui.f2i.cn/配置菜单子应用菜单

子应用的ismart-admin使用文档

详情请查阅主应用中的案例（菜单-案例）

建议在页面参照modules提供的example开发（/src/modular/modules/example）

modules的简介

设计原则:
将复杂且项目中已经约定成熟的部分页面划分为module，有利于项目之间的搬迁和维护
module中存在store、routes、config、apis、views、components等配置开发简介:
store会被注册到全局store的模块上，模块名为$+modulename；例如：user模块的store为$user
routes会被注册到全局的routes上，遵循同名覆盖，因此要注意命名规范，建议模块名+页面名称
config会与全局的config.module合并（任何情况下，全局的config权重最高）在页面中可通过this.$+模块名访问，例如：this.$user.config
apis为该模块提供的api，可通过this.$+模块名访问，例如：this.$user.apiname
views、components不影响全局配置，仅用于当前module使用。

补充说明

系统开发相关操作简介

配置路由

代码案例

/**

 \* iview-admin中meta除了原生参数外可配置的参数:

 \* meta: {

 \*  title: { String|Number|Function }

 \*         显示在侧边栏、面包屑和标签栏的文字

 \*         使用'{{ 多语言字段 }}'形式结合多语言使用，例子看多语言的路由配置;

 \*         可以传入一个回调函数，参数是当前路由对象，例子看动态路由和带参路由

 \*  hideInBread: (false) 设为true后此级路由将不会出现在面包屑中，示例看QQ群路由配置

 \*  hideInMenu: (false) 设为true后在左侧菜单不会显示该页面选项

 \*  notCache: (false) 设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致

 \*  access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由

 \*  showAlways: 一直显示上级目录（正常情况下仅有一个子路由则直接显示该子路由）

 \*  icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'

 \*  beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数

 \*  async: 设为true则表示该路由为异步路由，需要通过系统菜单分配权限才会显示，否则全部用户均显示

 \* }

 */

若async配置为true，则需要在系统管理中配置菜单，以及相应的按钮操作，接口权限等

系统菜单中分三种类型：内部、子应用、外部，需要正确配置。

配置权限

//authorities 多个用,号隔开
v-show="hasAuthority('systemUserCreate')"
v-show="hasAuthority('systemUserCreate,systemUserUpdate,')"

部分组件中的按钮权限配置请参考组件使用文档，大多数情况下会增加“authority”属性。

配置表头
将columns配置转成json后复制到系统管理表列配置，新增或编辑框头部有“表单数据”操作项，然后将值复制在jsonConfig对应的columns即可。注意：每一项都要有key，包括操作列。

代码简介

ismart 目录

microservice

使用singleSpa实现微前端，singleSpa.js文件中扩展registerMicroApps，通过远程加载子应用的manifest.json 文件，解析需要加载的js、css等资源文件地址，然后粗暴的挂载到主应用中。注意：其中子应用可以本地注册也可以通过系统菜单配置中的子应用类型进行自动注册

以下为子应用本地代码案例，配置几乎与本地路由无异

import Main from '@/components/main';
import parentView from '@/components/parent-view';

export default {
  name: 'subapp-vue-template',
  entry: 'app', 
  manifest: '/subapp-vue-template-dist/manifest.json',
  library: 'subapp-vue-template',
  activeRule: '/subapp-vue-template',

  /**
   * path
   * name
   * icon
   * redirect
   */
  routes: [{
    path: '/subapp-vue-template',
    name: 'subapp-vue-template',
    component: Main,
    meta: {
      hideInMenu: process.env.NODE_ENV === 'production',
      title: '子应用模板',
      icon: ''
    },
    children: [{
      path: '',
      name: 'vue-home',
      meta: {
        title: '首页',
      },
    },
    {
      path: 'example',
      name: 'app-example',
      meta: {
        title: '案例',
      },
      component: parentView,
      children: [{
        path: 'base-page',
        name: 'app-example-base-page',
        meta: {
          title: '基础列表页面'
        },
      }]
    }
    ]
  }]
};

modular
非硬性要求，目的是希望能将复杂的系统进行模块划分，每个模块下都提供了routes、store、components、view与src类似的基础结构，并且会将这些配置合并到系统中，比如routes会自动注册到路由中，store会成为应用stroe的一个模块（使用的时候加需要模块名前面加$符号）详情请看index.js modules的目录结构可以参考__template__，建议每次开发新的模块可以复制一份，然后更改文件名。
packages
这个目录主要用于构建ismart-admin npm包，里面主要维护了需要共享子应用的组件或功能

src目录
- microapps
  参考ismart中的microservice
- modules
  参考ismart中的modular
- main.js
  入口文件
其他目录
- /mock
  用于接口模拟，其中global.js会扫描全部mock.js文件，进行自动注册，因此在项目的任何地方都无需主动注册mock
- /public

部署

测试环境使用云效自动部署，复制主应用流水线的配置即可
生产环境
通过docker打包部署，根目录有Dockerfile和nginx的配置文件default.conf

子应用

父应用提供的依赖
- 权限控制 hasAuthority
- 接口请求 $axios
- 主应用实例 window'root'

父应用提供的事件及用途

//注意主应用和子应用对于的name有可能不一致，需要自己适配
window.root.$on('on-close-tag', (res) => {
  const newTagNavList = res
  .filter((item) => item.name.indexOf('app-') === 0)
  .map((item) => ({ ...item, name: item.name.replace('app-', '') }));
  this.setTagNavList(newTagNavList);
});

子应用部署

测试环境使用云效自动部署，复制子应用模版流水线的配置，进入编辑流水线页面找到源并更改代码源；找到构建上传并更改oss上传中的Bucket Folder路径${name}-dist
生产环境
通过docker打包部署，根目录有Dockerfile和nginx的配置文件default.conf
注意：每一个子应用的default.conf配置是不一样的，记得把/subapp-vue-template-dist改成自己的

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

axios clipboard core-js countup cron-parser cropperjs debounce echarts highlight.js js-cookie lodash moment simplemde single-spa tree-table-vue uuid view-design vue vue-i18n vue-router vuedraggable vuex wangeditor

@everything-registry/sub-chunk-1937 @zalastax/nolb-ism

0.6.2

3 years ago