html项目引入element-ui

1.html 页面外部的 element-ui<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="ht

A 壹零贰肆

16445人浏览 · 2022-02-24 17:01:13

A 壹零贰肆 · 2022-02-24 17:01:13 发布

1.html 页面外部的 element-ui

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

之后在你的html页面中可以任意的使用element-ui组件了，包括一些element-ui的图标等，美滋滋，

2.第一种方式是有网的情况下，但是如果在内网，没有互联网怎么办？

这就需要我们把vue和element-ui下载到本地了。

下载地址 vue.js： https://cdn.jsdelivr.net/npm/vue/dist/vue.js

　　　　element.js: https://unpkg.com/element-ui@2.4.11/lib/index.js

　　　　element.css: https://unpkg.com/element-ui@2.4.11 /lib/theme-chalk/index.css

　　我是粘贴复制到本地的，注意element-ui使用的是2.4.11版本的。

html中引用

<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" type="text/css" href="../css/base.css" />
        <!--引入 element-ui 的样式-->
        <link rel="stylesheet" type="text/css" href="../css/element.css">
        <!-- 必须先引入vue  后使用element-ui -->
        <script src="../js/build/vue/vue.js"></script>
        <!-- 引入element 的组件库-->
        <script src="../js/build/vue/element.js"></script>
    </head>

到了这里你会发现element的基础样式可以使用，但是icon会显示不出来。那是因为你的css文件没有连接到icon的文件中，那我们还需要下载两个文件，

附上下载连接：两个都要下载
UNPKG - element-ui

放到css下的fonts目录中。