导言:在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即可解决该问题
<!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>
今天教程就到这里,有什么问题欢迎下方评论