因为项目无法使用npm构建项目,只能使用script标签的方式引入ant design vue,最近想用一下ant design vue的图标发现需要单独引入一个@ant-design/icons-vue。但github上找到一个示例,我模仿这写了一下,收获一个报错,想问问有没有人能帮忙解答一下,谢谢。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script type="text/javascript" src="../static/C_IMPORT_ANTDV.js"></script>
<script type="importmap">
{
"imports": {
"@ant-design/icons-vue": "https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@7.0.1/+esm"
}
}
</script>
</head>
<body>
<body style="display: flex; justify-content: center;">
<!-- 页面布局 Bgn -->
<div id='app' style="width: 1190px; padding-top: 8px;">
<a-config-provider :locale="locale">
<down-outlined />
</a-config-provider>
</div>
<script type="module">
import { DownOutlined } from "@ant-design/icons-vue";
const { createApp } = Vue;
dayjs.locale('zh-cn');
const locale = antd.locales.zh_CN;
createApp({
components: {
DownOutlined,
},
setup() {
return {
locale,
}
}
}).use(antd).mount("#app");
</script>
</body>
</body>
</html>
这是C_IMPORT_ANTDV.js中的代码
/* 引入各项依赖 */
//Vue v3.4.15
document.write('<script type="text/javascript" src="../static/vue.global_3.4.15.js"></script>');
//dayjs v1.11.10
document.write('<script type="text/javascript" src="../static/dayJs/dayjs.min.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/customParseFormat.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekday.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/localeData.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekOfYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/weekYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/advancedFormat.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/quarterOfYear.js"></script>');
document.write('<script type="text/javascript" src="../static/dayJs/zh-cn.js"></script>');
//antdv v4.1.2
document.write('<script type="text/javascript" src="../static/AntdVue/antd.min_4.1.2.js"></script>');
document.write('<script type="text/javascript" src="../static/AntdVue/antd-with-locales.min.js"></script>');
document.write('<link rel="stylesheet" href="../static/AntdVue/reset_4.1.2.css" />');
//axios v1.0.0
document.write('<script type="text/javascript" src="../static/axios/axios.min.js"></script>');