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

先上最终代码

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 本地版本 -->
  <!-- <link rel="stylesheet" type="text/css" href="../css/element-ui.css" />
  <script src="../js/vue.js"></script>
  <script src="../js/element-ui.js"></script> -->

  <!-- 联网版本 -->
  <!-- 引入elementui样式 -->
  <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]"></script>
  <!-- 引入elementui组件库-->
  <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>

遇到的坑

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

否则报错：index.js:1 Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
需要使用new Vue去创建一个Vue的实例才能够生效样式
```
  new Vue({
      
      
    el: '#outerBox'
  })
```
并且这里还有几个坑
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官方文档之后，将其替换为了<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>中的文件，即可
建议将对应的文件下载到本地，否则每次进行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目录，然后将下载的两个字体文件放到这里面即可

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

先上最终代码

遇到的坑

猜你喜欢