第十三章：使用Element UI框架开发
Element UI 框架介绍
我记得几年前，好多公司用bootstrap+jquery开发网站，那个时候还没有vue和react。做网站就靠前端手写页面，后端再做成一个php或者jsp。
你要说这种开发模式其实也没什么不好，甚至现在我看到的很多政府官网都是单纯的php或者jsp做的。但是毕竟时代在进步，我们也不能驻足不前。
element是饿了么团队出品，它相当于是vue的bootstrap UI框架。它本身已经把很多小的脚本给咱们写好了。譬如说，按钮组，选项卡，焦点图等。
我这个博客也是基于element做的，有了它确实方便了很多。它最大的优点就是，只要你在官网上看到的，拿过来就可以用。
开始安装
1.直接通过script方式引入
<script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>
加载以后，你打开elementui的官网，直接复制上面的代码即可！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.0/index.js"></script>
<script>
//加载element
Vue.use(ELEMENT);
new Vue({
el:"#app",
data:{
message:3
},
methods: {
},
mounted: function() {
}
})
</script>
</body>
</html>
2.npm安装方式：
注意：如果你对npm包管理不熟悉，建议你跳过这一章，先阅读后面关于vuecli的使用方法的章节！
cnpm install element-ui -s-d
在main.js中添加以下几行代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
注意：在element中规范了字体，在不同系统中防止字体变化。我直接放在了#app的样式上了。
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
写在最后
ok，看到这里。vue全部入门教程，已经包含了axios，vuex，route的全部用法。这个时候，你已经可以开始构建自己的项目了。
不过，你应该会发现，每次都从页面上去加载这些东西，确实很麻烦，并且发布，打包，优化。还有一些前端厉害的sass啊，less啊。
根本就没有用上。
又没有什么好的方法，让我们一次整合这些支持包，然后还能打包优化，甚至一键发布？
当然有！请看我的后继教程——vuecli2入门教程—自己搭建前端自动化工程。
