文章目录
前端最重要的就是设计啊,没点审美没点创意根本弄不出好看的界面,甚至好看的组件都不会写,干脆直接找几个组件库,用现成的,又好看还省事。
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: