element ui在.html中引用

最新推荐文章于 2024-04-12 17:03:28 发布

weixin_45586698

最新推荐文章于 2024-04-12 17:03:28 发布

阅读量269

点赞数

分类专栏： Web 文章标签： ui html

本文链接：https://blog.csdn.net/weixin_45586698/article/details/121523583

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在HTML文件中引用和使用ElementUI库，包括引入Vue.js、ElementUI CSS和JS文件的过程。通过一个简单的示例，展示了在HTML中创建一个包含按钮和对话框的页面，并成功显示ElementUI组件。关键步骤包括正确配置链接和脚本引用，以及在JavaScript中初始化Vue实例。

摘要由CSDN通过智能技术生成

element ui可以在webpack中使用，但是模板是.vue,
能不能在.html引用呢
标准模板

可见分为三块

思路：

官网例子在线运行
在这里插入图片描述
复制代码到test.html文件
引用src时加上https，不确定是http还是https验证一下

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https:unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">

没显示

使用更简单的没有css和js的示例
官网安装那里有快速上手的代码，复制下来

<!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>