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