Hi Haihai, I’m here to fish again~. Have you encountered the situation where elementui is introduced into html files in your work? We know that in the vue project, using elementui requires operations such as installation, configuration, and import, so how to import it in the html file?
A project I encountered in my work used PythonWeb, which was a bit similar to the front end we learned, but not exactly the same. I haven't touched this project before, and I use the django framework. In fact, when it is introduced, it is almost the same as the general html file we usually write.
First introduce the style in the head of the file, we can use the CDN URL, but just in case, we can copy the source code and put it in one of our static files, wouldn't it be more convenient. Name it elementui.css, and an elementui.js. This way you don't have to write the following code
<!--引入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/[email protected]/dist/vue.js"></script>
<!-- 引入elementui组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>Then you can directly write the following code:
<link rel="stylesheet" href="static/xxx/elementui.css">
<script src="/static/xxx/vue.js"></script>
<script src="/static/xxx/elementui.js"></script>It should be noted that elementui must be introduced after vue is introduced, otherwise the error will be reported first: index.js:1 Uncaught TypeError: Cannot read property 'prototype' of undefined . If you report this error now, do you know how to fix it?
In this case, everything is ready, only the east wind is owed. We will find that the style of the icon will disappear if it is introduced in this way. That's because our css file is not connected to the icon file, then we need to download two files, I put the file address below
Create a folder at the same level as elementui.css and name it fonts. Put the two files downloaded above into the fonts folder. In this way, we can use it.
as the picture shows
Note that fonts and elementui.css are at the same level and are siblings, which means that elementui.css is the uncle of these two icon files, so don’t make a mistake.
I will share it here this time, see you next time.