本文共 939 字，大约阅读时间需要 3 分钟。

element-ui 介绍

饿了么前端开发组件框架 是 “一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。”

本篇将在前面的脚手架基础上, 引入 element-ui, 并完成一个分页表格.

安装配置 element-ui

npm i element-ui babel-plugin-component --save-dev

babel-plugin-component 用来控制只引入需要的组件，以达到减小项目体积的目的。

将 .babelrc 修改如下:

{    "presets": [        "es2015",        "stage-2"    ],    "plugins": [[ "component", [            {                "libraryName": "element-ui",                "styleLibraryName": "theme-default"            }        ]]]}

在自己的组件中使用 element-ui

修改 index.vue 如下:

先 import 再 Vue.use ,就可以愉快的使用了. 因为前面我们安装并配置了 babel-plugin-component 它将自动为我们引入相关组件的样式

来看看效果吧

基于前面搭建好的这一套脚手架, 后面再引入第三方组件库就变得很容易了, 我们来看看运行效果吧.

npm run start

WEB: www.liveqing.com

下一篇, 介绍如何引入 videojs 播放器插件

转载地址：http://igvvi.baihongyu.com/