《ElementUI 好难_elementui怎么样》

一、解决方案简述

当很多人说ElementUI很难时，其实更多是源于对它的不熟悉。ElementUI是一个优秀的UI库，它提供了丰富的组件，可以快速构建美观的页面。要解决觉得它难的问题，一方面需要系统学习其文档，另一方面多实践项目中的应用。

二、深入解决问题

（一）从安装开始

ElementUI的安装很简单，可以通过npm进行安装。在命令行中输入：

javascript
npm i element - ui -S


然后在main.js中引入：

javascript
// 全局引入ElementUI
import ElementUI from 'element - ui';
import 'element - ui/lib/theme - chalk/index.css';
Vue.use(ElementUI);

如果是按需引入（这种方式可以减小打包后的文件体积），借助babel - plugin - component来实现。安装插件：

javascript
npm install babel - plugin - component -D

然后修改.babelrc文件：

json
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element - ui",
"styleLibraryName": "theme - chalk"
}
]
]
}

再根据需要引入组件，如只引入Button组件：

javascript
import { Button } from 'element - ui';
Vue.component(Button.name, Button);


（二）熟悉组件用法

以表格组件为例，想要创建一个简单的表格展示数据。

html

  <div>
    
      
      
      
      
      
      
    
  </div>
</p>


export default {
  data() {
    return {
      tableData: [
        {
          date: '2016 - 05 - 02',
          name: '王小虎',
          address: '上海市普陀区江路 1518 弄'
        },
        {
          date: '2016 - 05 - 04',
          name: '王小虎',
          address: '上海市普陀区江路 1517 弄'
        }
      ]
    };
  }
};


<p>

除了这种直接使用组件的方式，还可以通过事件绑定等操作增强组件的功能。例如给按钮绑定点击事件，在方法中处理逻辑：

html

  <div>
    点击我
  </div>
</p>


export default {
  methods: {
    handleClick() {
      alert('你点击了按钮');
    }
  }
};


<p>

只要静下心来按照官方文档学习，并不断实践，ElementUI就会变得简单易用，能够高效地开发出优质的前端界面。

（本文来源：nzw6.com）