不用amis的包 , 在index.html引入代码如下,要在main上面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" media="print"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
   
	  <link rel="stylesheet" href="https://unpkg.com/amis@6.5.0/sdk/helper.css" />
	  <link
	  rel="stylesheet"
	  title="default"
	  href="https://unpkg.com/amis@6.5.0/sdk/sdk.css"
	/>
	  <!-- <link
	    rel="stylesheet"
	    href="https://unpkg.com/amis@6.5.0/sdk/iconfont.css"
	  /> -->
  <script src="https://unpkg.com/amis@6.5.0/sdk/sdk.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="app-loading">
        <div class="app-loading-wrap">
          <div class="app-loading-title">
            <!-- <img src="/logo.gif" class="app-loading-logo" alt="Logo" /> -->
            <div class="app-loading-title"></div>
          </div>
          <div class="app-loading-item">
            <div class="app-loading-outter"></div>
            <div class="app-loading-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

然后别的设置 index.tsx页面

import { defineComponent, toRefs, reactive, watch, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAccessToken } from '@/utils/auth'
import WebStorageCache from 'web-storage-cache'
import { CACHE_KEY ,useCache} from '@/hooks/web/useCache'
import { ElNotification } from 'element-plus'


import axios from 'axios'
import qs from 'qs'
import download from '@/utils/download'
// import 'amis/sdk/sdk.js'
// import 'amis/sdk/rest.js'
// import 'amis/sdk/tinymce.js'
// import 'amis/sdk/pdf-viewer.js'

// import 'amis/sdk/sdk.css'
// import 'amis/lib/helper.css'
// import 'amis-ui/lib/themes/antd.css'
// import 'amis/sdk/iconfont.css'
// import 'amis/sdk/helper.css'

// import '@fortawesome/fontawesome-free/css/all.css'
// import '@fortawesome/fontawesome-free/js/all'
// import 'amis/lib/themes/default.css'

// import 'amis-ui/lib/themes/cxd.css'
import { service } from "@/config/axios/fecher";

import './index.scss'

const props = {
  schema: {
    type: Object,
    value: () => { },
  },
  env: {
    type: Object,
    default: () => ({}),
  },
}
export default defineComponent({
  props,
  emits: ['ready'],
  setup(props, ctx) {
    const router = useRouter()
    const common = reactive({})
    const { wsCache } = useCache()
    const user = wsCache.get(CACHE_KEY.USER)
    const userInfo = wsCache.get(CACHE_KEY.USERINFO)
    console.log(user)
    const renderBox = ref('renderBox')
    const location = () => {
      const current = router.currentRoute.value
      return {
        pathname: current.path,
        hash: current.hash,
        query: current.query,
        search: `?${qs.stringify(current.query)}`,
      }
    }
    const hanldeNext = () => {
      // window.open('#/editor', '_blank')
    }
    watch(
      () => props.schema,
      () => {
        
      }
    )
    const getList = () => {
      // @ts-ignore
      const scoped = amisRequire('amis/embed')
      // @ts-ignore
      const { normalizeLink } = amisRequire('amis')
      console.log(user)
      const instance = scoped.embed(
        renderBox.value,
        props.schema,
        {
          // 这里是初始 props，一般不用传。
          // locale: 'en-US' // props 中可以设置语言，默认是中文
          // theme: 'ant'
          data: {
            permissions: user.permissions,
            front_user:user,
            user_Info:userInfo
          }
        },
        {
           // 下面三个接口必须实现
           fetcher: service,
          //  fetcher: async ({
          //   url, // 接口地址
          //   method, // 请求方法 get、post、put、delete
          //   data, // 请求数据
          //   responseType,
          //   config, // 其他配置
          //   headers // 请求头
          // }: any) => {
           
          //   config = config || {};
          //   config.withCredentials = true;
          //   responseType && (config.responseType = responseType);

          //   if (config.cancelExecutor) {
          //     config.cancelToken = new (axios as any).CancelToken(
          //       config.cancelExecutor
          //     );
          //   }
          //   if(config.responseType){}
         
          //   config.headers = {...headers,Authorization:'Bearer ' + getAccessToken() } || {};
          //   if(url.includes('export')){
          //     const res = await axios({
          //       url,
          //       method,
          //       data,
          //       responseType:'blob',
          //       headers:{
          //         Authorization:'Bearer ' + getAccessToken() 
          //       }
          //     })
          //     download.excel(res.data, '字典数据.xls')
          //      return {
          //       status:0,
          //       code:200,
          //       msg: '123',
          //       data: res.data || {}, // data不可以为null，否则amis会报错：没有response Data
          //     }
          //   }
          //   if (method !== 'post' && method !== 'put' && method !== 'patch') {
          //     if (data) {
          //       config.params = data;
          //     }
          //     return (axios as any)[method](url, config);
          //   } else if (data && data instanceof FormData) {
          //     config.headers = config.headers || {};
          //     config.headers['Content-Type'] = 'multipart/form-data';
          //   } else if (
          //     data &&
          //     typeof data !== 'string' &&
          //     !(data instanceof Blob) &&
          //     !(data instanceof ArrayBuffer)
          //   ) {
          //     data = JSON.stringify(data);
          //     config.headers = config.headers || {};
          //     config.headers['Content-Type'] = 'application/json';
          //   }
          //   const res = await (axios as any)[method](url, data, config)
          //   if(res.data.code !== 0){
          //     ElNotification.error(res.data.msg)
          //   }else{
          //     ElNotification.success('操作成功')
          //   }
          //   return res
          // },
           isCancel: (value: any) => (service as any).isCancel(value),
          // requestAdaptor(api) {
          //   return {
          //     ...api,
          //     headers: {
          //       Authorization:'Bearer ' + getAccessToken() 
          //     }
          //   };
          // },
          // responseAdaptor(api, payload, query, request, response) {
          //  console.log(api, payload, query, request, response)
          //   return payload;
          // },
          theme: 'cxd',
          // 覆盖 amis env
          // 参考 https://aisuda.bce.baidu.com/amis/zh-CN/docs/start/getting-started#sdk
          ...props.env,
        },
        () => {
          // ctx.emit('ready', {
          //   instance,
          // })
        }
      )
    }
    onMounted(() => {
        getList()
    })
    return {
      ...toRefs(common),
      hanldeNext,
      props,
      renderBox,
    }
  },
  render() {
    const styles =  {
      // padding:'15px'
    }
    return <div ref="renderBox"   id="renderBox" style={styles}></div>
  },
})

以前用npm包确实加载缓慢,现在基本0延迟加载了,就是二拓可能不简单,之后在写文档

# 低代码
GitHub 加速计划 / vu / vue
109
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：4 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Rust 实战项目：TODO 管理器

avatar AtomGit开源社区
cover

Rust 命令行密码管理器工具开发

avatar AtomGit开源社区
cover

AI 浪潮终章奏凯！GitCode & 文心大模型 & 智源研究院 AI 应用开发大赛圆满落幕

avatar AtomGit开源社区