风尚前端学习-网页HTML引入element-ui库
导言：在HTML页面开发中。有时候一些复杂的菜单复选框漂亮的按钮啥的，
需要用到一些插件以及ui库今天教大家如何在HTML中引入element-ui库
大家好，我是风尚，一个web前端开发者，著作， 博客园，简书等平台均搜索风尚云网
废话不多说，开搞
其实饿了么官方插件文档中说明：
但是！注意不要直接复制文档中的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即可解决该问题
<!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>
今天教程就到这里，有什么问题欢迎下方评论
上一篇：
通过多线程提高代码的执行效率例子
下一篇：
Java 树形结构目录树的几种生成方式