您现在的位置是：首页 > 开发开发
把amis装进 buildadmin/vue3
2025-05-27 12:28:31【开发】人已围观
简介安装
npm环境安装略过，进入项目目录，cmd进入项目目录，如buildadmin 项目目录\web，npm i amis
1.在项目的main.ts中添加如下，根据需要调整，本次amis版本6.1.2import 'amis/sdk/
安装
npm环境安装略过，进入项目目录，cmd进入项目目录，如buildadmin 项目目录\web，
1.在项目的main.ts中添加如下，根据需要调整，本次amis版本6.1.2
2.写好子组件，创建文件，位置：buildadmin项目web\src\components\AmisReanderer.vue
使用方法
npm环境安装略过，进入项目目录，cmd进入项目目录，如buildadmin 项目目录\web，
npm i amis
1.在项目的main.ts中添加如下，根据需要调整，本次amis版本6.1.2
import 'amis/sdk/sdk.js';
import 'amis/sdk/rest.js';
import 'amis/lib/themes/default.css';
2.写好子组件，创建文件，位置：buildadmin项目web\src\components\AmisReanderer.vue
<template>
<div id="box"></div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
console.log("amis is good to use");
const props= defineProps({
amisjson: {
type: Object,
required: true
}
})
onMounted(() => {
// @ts-ignore
var amis = amisRequire('amis/embed');
let amisScoped = amis.embed('#box', props.amisjson);
})
</script>
<template>
<!-- 对话框表单 -->
<!-- 建议使用 Prettier 格式化代码 -->
<!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
<div><amis :amisjson="amisjson"></amis></div>
</template>
}
</script>
<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { onMounted,inject, reactive, ref ,defineComponent} from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import amis from "/@/components/AmisReanderer.vue";//刚才创建的组件
// 下面写json,参考amis官方文档
const amisjson={
</script>
很赞哦！ ()
上一篇：kws uri过滤，优化
下一篇：返回列表
相关文章
-
无相关信息
