应用增强

应用增强是指给低代码的应用扩展功能。如增加全局的状态、样式、配置等应用级的功能。

注意

该功能仅支持通过官方脚手架(npm create vtj@latest)创建的本地开发项目，在线方式不支持。

开启应用增强

开启该功能需要完成以下三个步骤：

在项目src目录下创建文件 enhance.ts。这是应用增强插件的默认入口文件，可以配置为其他名称或路径，无特殊需求建议采用配置。文件的代码需要导出 Vue Plugin。

import type { App } from 'vue';
import type { Provider } from '@vtj/renderer';

// 可以在此引用scss文件，需要用到的工具库，依赖等

export default function (app: App, provider: Provider) {
  // 应用增强代码
}

在 main.ts 文件导入 enhance, 并传递给 createProvider 方法。

// 省略了其他代码
import enhance from './enhance';

const { provider, onReady } = createProvider({
  // 省略了其他参数
  enhance
});

配置 vite.config.ts 开启设计器支持

import { createViteConfig } from '@vtj/cli';
import { createDevTools } from '@vtj/local';
export default createViteConfig({
  proxy,
  plugins: [
    createDevTools({
      // 开启增强
      enhance: true
    })
  ]
});

通过以上配置，启动开发环境 npm run dev 后，在源码运行、设计器视图、预览视图都加载了增强的代码。同时支持热更新。可以利用增强的代码对应用进行个性化的全局配置。

应用示例

给应用增加全局样式

需要给应用添加全局样式，只需在 enhance.ts 引入 .scss 文件即可。如

import type { App } from 'vue';
import type { Provider } from '@vtj/renderer';
// 引入样式文件
import './style/global.scss';
export default function (app: App, provider: Provider) {}

网络请求拦截

在实际项目开发时，您可能需要给请求头增加token或对响应进行错误提示等，这时，你可能需要用到请求拦截，通过应用增强可以方便处理。

import type { App } from 'vue';
import type { Provider } from '@vtj/renderer';
export default function (app: App, provider: Provider) {
  provider.adapter.request.useRequest((config) => {
    // 注入请求头
    config.headers.Token = '123456';
    return config;
  });

  provider.adapter.request.useResponse((res) => {
    // 响应拦截处理
    return res;
  });
}

接入Pinia

Pinia等其他工具库也可以增强文件中添加

import type { App } from 'vue';
import type { Provider } from '@vtj/renderer';
import { createPinia, defineStore } from 'pinia';

const pinia = createPinia();
const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

export default function (app: App, provider: Provider) {
  app.use(pinia);
  //通过 provide 提供
  app.provide('counter', useCounterStore());

  // 也可以挂载到 globalProperties
  app.config.globalProperties.counter = useCounterStore();
}

用 app.provide 的方式，在低代码页面需要定义注入才可以读取到store

挂载到 globalProperties 的可以直接通过上下文读取，如 this.counter

个性化配置

vite.config.ts 的 enhance 默认配置就是最便捷的使用方式，如需要自定义入口文件，可以参考配置

export interface EnhanceOptions {
  // 入口文件路径
  entry?: string;
  // umd 导出名称
  name?: string;
  // umd 产物文件名
  fileName?: string;
  // 外部化的依赖
  external?: string[];
  // 外部依赖对应的全局名称
  globals?: Record<string, string>;
  // 产物文件生成目录
  outDir?: string;
}

应用增强 ​

开启应用增强 ​

应用示例 ​

给应用增加全局样式 ​

网络请求拦截 ​

接入Pinia ​

个性化配置 ​