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 一样,需要啥就去找啥吧。

阅读 3.1k
112 声望
3 粉丝
0 条评论
112 声望
3 粉丝
文章目录
宣传栏