tsl-vue-instinct

介绍

tsl-project-instinct

tsl-project-instinct是服务于tsl-project-template项目基础模板的一个能力集成库

目前封装了包含以下基础能力

1. 国际化

2. 路由&侧边栏

3. 权限指令

4. 基础布局

5. 基础模板

6. 接口请求

不同能力间可能有耦合的情况 详细说明如下：

安装

• 设置镜像源

  由于团队内部使用Nexus管理npm包，先设置镜像源

  npm config set registry http://192.168.118.144:8081/repository/npm-group/

  如需发布包执行以下步骤，只安装忽略以下两步

  npm adduser --registry=http://192.168.118.144:8081/repository/npm-hosted/

  npm publish --registry=http://192.168.118.144:8081/repository/npm-hosted/

• 添加到项目

  yarn add tsl-project-instinct

国际化

国际化基于Vue I18n实现，详情配置请参照https://kazupon.github.io/vue-i18n/zh/

这里将列举常用配置

• 本组件默认已开启延迟加载翻译（一次加载所有翻译文件是过度和不必要的）

• 初始化:

  import Vue from 'vue'
  import App from './App.vue'
  import { tslI18n } from "tsl-vue-instinct";
  new Vue({
      render: h => h(App),
      i18n: tslI18n("zh") //'zh'为默认语言包名称,会加载/src/assets/lang下的zh.json文件
  }).$mount('#app')

• 语言环境获取与变更:

  this.setLang('zh');
  console.log(this.getLang());

• 需要在语言包目录路径: src/assets/lang添加所支持的语言包文件，格式例如zh.json

  {
    "sidebar": {
      "/": "首页",
      "/blank": "空白页",
      "listName": "列表合集"
    },
    "hello": {
      "title": "你好，特斯联！",
      "changeBtn": "变更语言"
    }
  }

• 加载网络资源（语言包）,动态加载

  //初始化网络语言包
  new Vue({
    render: (h) => h(App),
    i18n: tslI18n({
      name: 'cn',
      url: 'http://qtea17lxj.hn-bkt.clouddn.com/en.json'
    }),
    router: tslRouter(routers),
  }).$mount("#app");
  
  //设置网络语言包
  this.setLang('cn', 'http://qtea17lxj.hn-bkt.clouddn.com/en.json');

• i8n官网其它配置，如日期格式化，数字本地化，如下初始化:

  import { tslI18n } from "tsl-vue-instinct";
  new Vue({
    render: h => h(App),
    i18n: tslI18n("zh", {
  			dateTimeFormats,
        numberFormats
    }),
  }).$mount("#app");

路由配置

路由基于Vue Router实现,详情配置请参考https://router.vuejs.org/zh/installation.html

导航栏基于Ant Design Vue Menu 导航菜单链接: https://antdv.com/components/menu-cn/

这里将列举常用配置

• 初始化:

  import Vue from 'vue'
  import App from './App.vue'
  import routers from "./src/router"
  import { tslRouter } from "tsl-vue-instinct";
  new Vue({
      render: h => h(App),
      router: tslRouter(routers),
  }).$mount('#app')

• router.js 示例

  const myRouter = [
      {
          label: '首页-未开启国际化',
          path: '/',
          layout: import('./views/Home'),
      }
  ]
  
  const routers = {
      tslRouter: myRouter,
      mode: 'history',
      sidebar: {
          mode: 'vertical',
          theme: 'dark',
          i18n: true, // 配置国际化后，需要在语言包里面配置 例如 zh.json => {sidebar: {'/': '首页'}}
      },
      base: process.env.BASE_URL,
  }
  
  export default routers

• 完整字段说明:

• //TslSidebar 会根据myRouter的配置生成路由
  const myRouter = [
      {
          label: '首页', //在侧边栏的名称
          path: '/index', //页面路由匹配 动态路径参数 以冒号开头
          layout: 'code', //空白页blank,数据列表table,数据详情detail,错误码页面code,自定义页面路径'../views/homePage' 默认blank
          sidebar: true, //本页面是否显示侧边栏 默认true
          inSidebar: true, //本页面是否在侧边栏里面显示 默认true
          beforeEnter: (to, from, next) => {
              console.log(to, from, next)
              next();
          }, //组件独享路由守卫
          perm: '/index',//一个权限标识,可以和path相同,填写此参数需初始化权限指令
          children: [], //子页面
          data: {},//如果layout选择的是基础模板，可以通过data向基础模板传递参数，具体参数参考基础模板配置说明
      }
  ]

• 路由动态添加，以及路由更新

  this.addRtr({
    path: '/example',
    label: "500",
    layout: "code",
    data: {
      code: "500"
    }
  });
  this.addRtr({
    sidebar: {
      mode: "vertical", //vertical | inline
      theme: "light",
      i18n: true
     },
     tslRouter: [
      {
        path: "/403",
        label: "403",
        layout: "code",
      }
     ]
  });//目前updateRoute的sidebar和tslRouter分别只支持全量更新

网络请求

内置了基于axios的网络请求工具，做了前端网络请求封装，错误超时处理，数据加密解密，以及token设置

• 初始化请求工具：

  import {tslAxios} from "tsl-vue-instinct"
  const netTool = tslAxios('uaid', 'apiSecret', 'baseUrl', 'tipsFunction');

• 请求接口：

  netTool.net('/user', 'get')

• 设置token：

  netTool.setToken('tokenContent')

基础布局

基础布局定义了【侧边栏（sidebar）】与【主视图(main)】之间的布局关系

内置了布局对象，目前提供以下布局:

ClassicLayout是经单的左右布局方式，左边为侧边栏,右边为主视图

• 导入布局对象：

  import { tslLayout } from "tsl-vue-instinct";

• 目前布局列表：

  {
      ClassicLayout: ClassicLayout
  }

• 布局使用示例:

  <script>
  import { tslLayout } from "tsl-vue-instinct";
  
  export default {
    name: 'App',
    extends: tslLayout.ClassicLayout
  }
  </script>

基础模版

基础模板定义了常用的主视图，并处理了大量的内部逻辑（包括网络请求，分页翻页，保存删除操作），方便开发者只需简单配置即可，目前内置的基础模板分别是【列表模板】【详情模板】

• 需要结合内置路由使用，使用方式

  const myRouter = [
      {
          label: '首页-未开启国际化',
          path: '/',
          layout: 'list', //目前可选 list | detail 基础模板
      }
  ]
  
  const routers = {
      tslRouter: myRouter,
      mode: 'history',
      sidebar: {
          mode: 'vertical',
          theme: 'dark',
          i18n: true,
      },
      base: window["__POWERED_BY_QIANKUN__"] ? `/${process.env.VUE_APP_NAME}` : "/",//需要在vue.config.js 加入环境变量process.env.VUE_APP_NAME = require("./package.json").name;
  }
  
  export default routers

权限管理

基于角色的权限管理，影响视图是否显示

• 初始化:

  import Vue from 'vue'
  import App from './App.vue'
  import { tslDirect } from "tsl-vue-instinct";
  
  Vue.use(tslDirect)
  
  new Vue({
      render: h => h(App),
  }).$mount('#app')

• 指令使用(v-perm 标识了当前dom元素,需要当前用户的权限列表包含此标识才能显示此dom元素)：

  <div v-perm="'index/testBtn'">{{ "权限测试" }}</div>

• 获取&设置权限列表:

  this.setPerm(['index/testBtn', 'index/page2/userChart', 'user/login/registerBtn']);
  console.log(this.getPerm());