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目錄中。
我的項目目錄