通过CDN方式使用iView框架

最新推荐文章于 2022-09-17 08:05:37 发布

LvFengBing_23

最新推荐文章于 2022-09-17 08:05:37 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： iView 前端框架

本文链接：https://blog.youkuaiyun.com/LvFengBing_23/article/details/89279905

学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文主要探讨了通过CDN方式使用iView前端框架时可能遇到的两个问题：图标不显示和内容不显示。问题一是由于`<template>`在加载时不呈现，需替换为其他容器标签并确保其正确解析；问题二是检查是否存在未实例化Vue、自定义`<template>`模块、单标记的标签或需要特定格式的情况。文章提供了相应解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过CDN方式使用iView框架

html页面导入：

    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

通过CDN方式使用iview框架要注意的问题：

使用iView框架遇到的问题：
1、使用官网的例子，图标不显示
template自定义模板：HTML内容模板（）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript实例化。
因此，CDN方式使用iView框架在官网的例子时，template的内容不会呈现，

//官网的例子
<template>
    <div>
        <Icon custom="i-icon i-icon-shop_fill" size="24" />
        <Icon custom="i-icon i-icon-publishgoods_fill" size="24" />
        <Icon custom="i-icon i-icon-financial_fill" size="24" />
    </div>
</template>

如果要想图标显示，那么我们不仅要把<template id="id"></template> 更换成其他容器标记，如<div id="id"></div>，还要把官网中的 <Icon />单标记写成双标记<Icon></Icon>

2、【如果使用iView框架发现内容不显示的话，可以尝试下面的方法看看：