风尚前端学习-网页HTML引入element-ui库

最新推荐文章于 2024-07-11 16:15:50 发布

风尚云网

最新推荐文章于 2024-07-11 16:15:50 发布

阅读量5k

点赞数 8

分类专栏：风尚云网学习文章标签：学习 elementui 前端

本文链接：https://blog.csdn.net/zsx0806/article/details/123409903

版权

风尚云网学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

导言：在HTML页面开发中。有时候一些复杂的菜单复选框漂亮的按钮啥的，

需要用到一些插件以及ui库今天教大家如何在HTML中引入element-ui库

大家好，我是风尚，一个web前端开发者，著作风尚云网|首页，

博客园，简书等平台均搜索风尚云网

废话不多说，开搞

其实饿了么官方插件文档中说明：Element - The world's most popular Vue UI framework

但是！注意不要直接复制文档中的css跟js，因为你永远不知道官方文档多久更新一次！！！

上面的cdn 引入可能已经失效或者不是最新版

该代码为官方示例：

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

该代码已经测试到浏览器上：

什么ui都没显示，足以认定该cdn已经失效！！！！

这样的话，怎么办？

解决方案：

因为饿了么ui基本上基于vue制作的，引入最新的vuecdn即可解决该问题

安装 — Vue.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        <el-button type="success">安装</el-button>
        <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://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>

</html>