纯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目录，然后将下载的两个字体文件放到这里面即可

相关阅读:
现代信号处理——自适应滤波器（匹配滤波器）
【Python】json 格式转换 ① ( json 模块使用 | 列表转 json | json 转列表 | 字典转 json | json 转字典 )
通达OAV11.10版本，表单js开发
vie的刷新机制
【Linux】基础开发工具——vim入门操作
网络协议-TCP、UDP区别及TCP三次握手、四次挥手
Python21day学习---numpy生成数组的若干方法----day19
客快物流大数据项目（七十一）：impala-shell命令参数
机器学习实战运用：速刷牛客5道机器学习题目
驱动开发基础知识

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