html文件引入elementui该怎么做

最新推荐文章于 2025-05-07 14:29:47 发布

练习时长两年半的程序猿小Long

最新推荐文章于 2025-05-07 14:29:47 发布

阅读量9.1k

点赞数 9

CC 4.0 BY-SA版权

文章标签：大数据

本文链接：https://blog.youkuaiyun.com/weixin_68067009/article/details/125534311

本文介绍了如何在PythonWeb项目（使用Django框架）的HTML页面中引入ElementUI。首先，可以通过CDN或本地文件引入样式和脚本，确保Vue先于ElementUI引入以避免错误。接着，解决图标样式丢失问题，需要下载并放置图标字体文件到指定目录。通过这种方式，可以在非Vue项目中成功使用ElementUI。

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

害嗨海，我又来捞~。大家在工作中有没有遇到html文件引入elementui的情况。我们知道vue项目中，使用elementui需要进行，安装、配置、引入等操作吧，那么在html文件中，该如何引入呢？

我工作中遇到的一个项目，用的是PythonWeb，跟我们学习的前端有点像，但又不完全一样。我之前也没接触过这中项目，使用的是django框架。其实呢，引入的时候，跟我们平常写的一般的html文件是几乎一样的。

首先在文件的head里引入样式，我们可以使用cdn网址，但是以防万一，我们可以把源码拷贝下来，放在我们一个静态文件里，岂不是更省事。命名为elementui.css，和一个elementui.js。这样就不用写以下代码了

<!--引入element-ui的样式-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，再引入elementui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入elementui组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

那就可以直接写以下代码：

<link rel="stylesheet" href="static/xxx/elementui.css">
<script src="/static/xxx/vue.js"></script>
<script src="/static/xxx/elementui.js"></script>

要注意的是elementui一定要再vue引入后才能引入，不然首先就会报错这句话：index.js:1 Uncaught TypeError: Cannot read property ‘prototype‘ of undefined。如果你们现在报了这个错误，知道怎么改了吧

这样的话，万事俱备，只欠东风。我们会发现，这么引入的话icon的样式会消失。那是因为我们的css文件没有连接到icon的文件中，那我们还需要下载两个文件，文件地址我放在下方

图标链接

在elementui.css同级创建一个文件夹，命名为fonts。将上面下载的这两个文件，放到fonts文件夹当中。这样，我们就可以使用啦。

如图所示

注意，fonts和elementui.css同级，是兄弟关系，相当于elementui.css是这两个图标文件的叔叔，不要引错了哦。

这次就分享到这里，下次见。