Neurotic Pumpkin Murderer

    tsl-vue-instinct

    1.1.2 • Public • Published

    介绍

    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());

    Keywords

    none

    Install

    npm i tsl-vue-instinct

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    23.5 kB

    Total Files

    18

    Last publish

    Collaborators

    • yangxun