Rtlink-vt NPM | npm.io

rtlink-vt

对 rtlink 前端框架进行扩展，仅适用于基于 rtlink 框架创建的vue项目。

安装

npm install rtlink-vt --save

使用

考虑到 rtlink-vt 并不是普通的组件库，而是会对前端框架的布局、样式进行修改，同时还提供示例页面、文档说明、代码生成等功能，因此配置方式较为复杂。

添加文件

在 src/plugins 中添加文件 vt.js ，其中编辑以下内容：

import Vue from 'vue'
import RtlinkVt from 'rtlink-vt';
import 'rtlink-vt/packages/theme/index.scss';
import 'rtlink-vt/packages/route';
Vue.use(RtlinkVt)

在 mock/controller 中添加文件 vt-mock.js，其中编辑以下内容：

const mockdata = require('../../node_modules/rtlink-vt/packages/mock');
module.exports = mockdata;

修改文件

在src/mixins/tableHeight.js 中，第3行左右修改代码

tableHeight() {
  const pageTabsHeight = document.querySelector('div.vt-page-tabs') ? 60 : 0;
  return this.$baseTableHeight(45 - pageTabsHeight);
},

在 src/plugins/index.js 中，添加以下代码：

import './vt'

在 src/config/theme.config.js 中，第16行左右修改代码

//主题色
themeColor: '#24a2ff',

在 src/styles/base.scss 中，第116行左右修改代码

/* 注释掉关于transition的全局样式 */
* {
  /*transition: $base-transition;*/
}

在 src/styles/variables.scss 中，第4行左右修改代码

/* 框架默认主题色 */
$base-color-default: #24a2ff;

在 src/components/layouts/index.vue 中，第52行左右，添加 ht-top-bar，将 ht-tabs-bar 注释掉

<ht-top-bar />
<ht-nav-bar />
<!--<ht-tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />-->

在 src/components/layouts/HtAppMain/index.vue 中，第7行左右，在 <transition> 的上面添加代码

<ht-tabs-bar />

在 src/components/layouts/HtSideBar/index.vue，第21行左右，将 ht-side-bar-item 修改为 vt-side-bar-item

<vt-side-bar-item
  :key="route.id"
  :full-path="route.path"
  :item="route"
/>

在 src/components/layouts/HtTabsBar/index.vue，第36行左右，添加以下代码

<vt-demo-code />

在 src/components/layouts/HtTabsBar/index.vue，第43行左右，添加以下代码

<li class="context-menu-item">
  <el-button type="text" @click="handleOperateTabs('refreshRoute')">
    刷新当前标签页
  </el-button>
</li>

在 mock/index.js 中，第10行左右添加代码

// 避免进程crash
process.on('uncaughtException', function (err) {
  console.log('uncaughtException: ' + err);
});

在 mock/index.js 中，第61行左右修改

//使mock接口支持异步返回
//res.json(mock(respond instanceof Function ? respond(req, res) : respond))
const result = typeof respond === 'function' ? respond(req) : respond;
const promise = typeof result?.then === 'function' ? result : Promise.resolve(result);
promise.then(obj => res.json(mock(obj))).catch(e => res.json(mock(e)));

【todo】待补充 stypes/themes/header和styles/themes/login