本文介绍了几个常用的前端组件库，包括Element-UI、Semantic UI、BootStrap和Foundation的CDN引用、常见问题及解决方案。通过实例展示了如何引入和使用这些组件库，并提供了教程资源，帮助开发者更好地在项目中应用。
文章目录
前端最重要的就是设计啊，没点审美没点创意根本弄不出好看的界面，甚至好看的组件都不会写，干脆直接找几个组件库，用现成的，又好看还省事。
CDN
这是BootCDN，BootCDN提供稳定快速以及免费的前端开源项目CDN加速服务，项目很多，可以找找有没有好玩的，直接引入即可。
但是我觉得BootCDN好像好慢啊，加载要好几秒，但是其实不是问题，有空的时候把文件下载下来就可以本地引用了。
Element-UI
之前开始写前端的时候看到element-ui可以提供很多好的组件，比自己写的好看多了，就想着既然有现成的为什么不拿来直接用呢，我就去搜了一下官网的教程，官网说可以使用CDN方式引入，但是我引入以后没有用，在火狐浏览器里面看是普通按钮，在360里面看直接就是文本，可能是因为我没有用npm安装他需要的东西？总之就是，要想不安装或者不配置一些东西，是没法用官网的方式。
然后找到了方法，可以将需要的css和js等文件下载下来，直接作为本地文件引入。
引入
需要下载如下三个文件，如果点击后没有直接下载，新建个文件复制粘贴进去就行了。
vue.js，element.js，element.css
然后有一个小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element-ui test</title>
<link rel="stylesheet" href="element-ui/css/element.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-success">搜索</el-button>
</div>
</div>
</body>
<script src="element-ui/js/vue.js"></script>
<script src="element-ui/js/element.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
visible: false }
}
})
</script>
</html>
之后打开页面就可以看到有一个比较好看的button了。
我的文件结构为
- index.html
- element-ui
-
- css
-
-
- element.css
-
-
- js
-
-
- element.js
-
-
-
- vue.js
-
但是字体好像有点问题，下载这两个东西
element-icons.woff，element-icons.ttf
然后放在element-ui文件夹的css文件夹里。
修改element.css文件，找到如下内容
@font-face{
font-family:element-icons;
src:url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");
font-weight:400;
font-display:"auto";
font-style:normal
}
按照路径改一下就好，我这改成了
@font-face{
font-family:element-icons;
src:
最低0.47元/天 解锁文章
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
