矿泉水丶 2025-01-15 10:11 采纳率: 50%
浏览 93

CDN如何引入@ant-design/icons-vue图标

因为项目无法使用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>');

img

  • 写回答

3条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2025-01-15 10:12
    关注
    让【道友老李】来帮你解答,本回答参考gpt编写,并整理提供,如果还有疑问可以点击头像关注私信或评论(小黑屋了,无法评论,请私信)。
    如果答案让您满意,请采纳、关注,非常感谢!
    解决这个问题的关键在于正确引入和注册`@ant-design/icons-vue`的图标组件。根据你提供的代码,你需要在`<script type="module"></script> <script type="importmap"></script> <body>
    <script type="module"></script> </body>
    请注意,上述示例中的代码仅供参考,可能需要根据实际情况做出调整。另外,确保在项目中正确引入Vue及相关依赖,以及正确配置`@ant-design/icons-vue`的图标组件路径。希望这能帮助你解决问题。
    评论

报告相同问题?

问题事件

  • 创建了问题 1月15日