element-ui本地使用

简介: element-ui本地使用

官网上element-ui本地使用的例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

在本地使用,需要把通过CDN方式引入的文件下载到本地,本地替换后会出现图标无法显示的问题。

原因:缺少两个文件(index.css中需要)

@font-face{
  font-family:element-icons;
  src:url(fonts/element-icons.woff) format("woff"),
  url(fonts/element-icons.ttf) format("truetype");
  ...
}

官方地址下载这两个文件

点进去,View Raw下载到index.css同级fonts下

图标正常显示了

注意版本要对应


相关文章
element-ui表单验证使用
element-ui的表单验证主要分三部分: validate options rules 最常用的是rules. 定义rule可以有三种形式: 函数: { name(rule, value, callback, source, options) {} } 对象: { name: { typ.
6610 0
|
20天前
|
JavaScript 前端开发 开发者
Element-UI快速入门
Element-UI 是一个功能强大的 Vue 组件库,非常适合快速开发高质量的企业级前端应用。通过本文的快速入门指南,你应该能够开始使用 Element-UI,并将其组件应用到你的项目中。不断探索和实践将帮助你更好地理解和利用这个工具库为你的应用增添独特的价值。 希望这篇博客能够帮助你快速上手 Element-UI,为你的 Vue 项目加速开发。
20 1
|
2月前
|
JavaScript Windows
Element-ui快速入门
Element-ui快速入门
20 0
|
2月前
|
资源调度 JavaScript 开发者
如何强制安装element-ui
如何强制安装element-ui
40 0
|
7月前
|
前端开发 JavaScript CDN
【 Element UI 】—Element UI 的基本使用
【 Element UI 】—Element UI 的基本使用
|
8月前
|
JavaScript
Element UI报错:Unknown custom element: <el-menu>
Element UI报错:Unknown custom element: <el-menu>
86 0
|
9月前
|
JavaScript 前端开发 开发者
Element-UI快速入门(一)
什么是Element UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制
129 0
|
9月前
|
XML JSON JavaScript
什么是 SAP UI5 的 Element binding
什么是 SAP UI5 的 Element binding
|
11月前
element-ui中的prop 的相关作用
element-ui中的prop 的相关作用
326 0