html項目引入element-ui


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的文件中,那我們還需要下載兩個文件,

附上下載連接:兩個都要下載
https://unpkg.com/browse/element-ui@2.10.1/lib/theme-chalk/fonts/

放到css下的fonts目錄中。

我的項目目錄

 

 參考博客:https://blog.csdn.net/bingot/article/details/85071075?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1

https://blog.csdn.net/m0_37893932/article/details/79460652


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM