纯html文件引入elementUI组件库要点记录

先上最终代码

DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  

  
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.9">script>
  
  <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
  <div id="outerBox">
    <el-button type="primary">主要按钮el-button>
    <i class="el-icon-edit">i>
    <el-input placeholder="请输入内容">el-input>
    <el-tag type="success">标签二el-tag>
  div>
body>
<script>
  new Vue({
    el: '#outerBox'
  })
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

遇到的坑

需要在引入Vue之后再引入element-ui的js文件

否则报错：index.js:1 Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
需要使用new Vue去创建一个Vue的实例才能够生效样式
```
  new Vue({
    el: '#outerBox'
  })
1
2
3
```
并且这里还有几个坑
1. 不能使用body元素设置id，否则无效
2. 这个script标签需要放到body之后，否则获取不到dom
引入的Vue的cdn需要注意

我当时使用的是bootcdn：https://www.bootcdn.cn/vue/

用的文件是xxx/vue.cjs.js的文件，然后报错如下：exports is not defined at vue.cjs.min.js:1:36

并且这种情况下的js文件的内容也是非常少的，感觉不对，然后看了Vue官方文档之后，将其替换为了中的文件，即可
建议将对应的文件下载到本地，否则每次进行cdn的请求加载资源不方便
在使用本地的资源的情况下，使用icon会报错

GET file:///C:/Users/aiyong/Documents/GitHub/extensions/css/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND

大概的意思就是图片文件找不到，体现在network中的font资源请求失败，如果是是使用cdn的情况是正常的，

那么这种情况，如果需要使用本地静态资源的话，就需要把font也下载到本地然后进行引用

https://github.com/ElementUI/theme-chalk/tree/master/src/fonts

下载之后，在css目录下新建fonts目录，然后将下载的两个字体文件放到这里面即可

相关阅读:
用DIV+CSS技术设计的红酒主题网站（web前端网页制作课作业）
膜拜！清华大佬整理的史上最全面试题，征服美团面试官就靠它
iNFTnews | Web3时代，用户将拥有数据自主权
【Oracle】Oracle系列之五--Oracle表空间
vs code 和 hbuilder 历史记录查询
v-model和v-bind的区别？
【Oracle】Oracle系列之十五--存储过程
性能优化之详解各种指标
JavaScript常用事件详解
【unity】ComputeShader的学习使用

原文地址：https://blog.csdn.net/qq_43382853/article/details/126470112