Vue 项目尝鲜（四） 使用 ElementUI 布局

前言 上回我们搭了项目，也大概了解了 vue 项目的结构啦，也熟悉一点基本操作，但是一定会感觉这个页面好像有点丑，看不下去，要美化一下。但是我们不是 UI，然后你要是不幸审美和我一样差的话，这个要我们自己搞页面就有点难受了，一般我们会使用模仿他人，或者使用 bootstrap 这样的 UI 库来帮我们搞出一套好看的页面出来，那么 vue 这边咧，它这边也有很多 UI 组件库可以用，并且用起来更加方便舒服，下面我们就用一下饿了么开源的 ElementUI 组件库吧。

引入

这个我们先用 npm 装一下依赖

npm install element-ui -S

然后他可以全局引入和局部引入，我们就简单粗暴全局引入了，我们直接在 main.js 里面加入下面的代码

import Vue from 'vue'
import App from './App'
import router from './router'
// 开始加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)
// 加到这里
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这样子我们就全局引入了 ElementUI 了，我们就可以在我们项目的其他地方使用 ElementUI 的组件了。

使用

其实 Element 组件的使用不用学的，和 bootstrap 一样，看官方文档就行了，不过它比 bootstrap 更方便易懂，就像我这样，就可以用组件搞出一个好看的按钮了

<el-button>按钮</el-button>

然后其他的也就不用说了，和 bootstrap 一样，需要啥就去找啥吧。