第一种：使用CDN的方式引入
<!--引入 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/[email protected]/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
之后在你的html页面中可以任意的使用element-ui组件了，包括一些element-ui的图标等，美滋滋，
缺点：网络不好时，页面组件展示不出来。
第二种：使用本地资源
这就需要我们把vue和element-ui下载到本地了。
下载地址 vue.js： https://cdn.jsdelivr.net/npm/vue/dist/vue.js
element.js: https://unpkg.com/[email protected]/lib/index.js
element.css: https://unpkg.com/[email protected]/lib/theme-chalk/index.css
我是粘贴复制到本地的，注意element-ui使用的是2.4.11版本的。
也可以换成最新版本的
element.js: https://unpkg.com/[email protected]/lib/index.js
element.css:https://unpkg.com/[email protected]/lib/theme-chalk/index.css
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" /> <link rel="stylesheet" type="text/css" href="../css/element.css"> <script src="../js/build/vue/vue.js"></script> <script src="../js/build/vue/element.js"></script> </head>
到了这里你会发现element的基础样式可以使用，但是icon会显示不出来。那是因为你的css文件没有连接到icon的文件中，那我们还需要下载两个文件，
也可以在vue项目的依赖中找到element-ui文件，将fonts复制到html项目中。
本文转载自: https://blog.csdn.net/qq_44146522/article/details/137686746
版权归原作者 我家媳妇儿萌哒哒 所有， 如有侵权，请联系我们删除。
版权归原作者 我家媳妇儿萌哒哒 所有， 如有侵权，请联系我们删除。