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 同样，须要啥就去找啥吧。