element-ui使用步骤

element-ui 的使用步骤如下。

安装element-ui

在终端中执行以下命令。

npm i element-ui -S

element-ui使用方式

element-ui 有两种使用方式。

完整引入: 完整引入是指把所有 element-ui 组件都导入，这样操作简单，但是也有缺点，即文件体积过大，会导致网页加载速度慢，所以不建议使用完整引入。
按需引入: 按需引入是指需要使用哪个组件就引入哪个组件，没有多余的组件，这样会提高页面的加载速度。

按需引入的使用方式是在终端中执行以下命令。

npm install babel-plugin-component -D

配置.babelrc

代码如下。

"plugins": [
  "transform-vue-jsx",
  "transform-runtime",
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

全局使用element-ui

打开 main.js，需要使用哪个组件就在 main.js 中引用哪个组件，例如要全局使用 Button 按钮，可以这样操作，代码如下。

//1．按需引入组件
import { Button } from 'element-ui';
//2．注册组件
Vue.use(Button)

此时 Button 按钮就可以全局使用，如图 8-1 所示是 element-ui 提供的按钮样式。

Figure 1. 图8-1　element-ui官方效果图

单击显示代码，就可以看到相应的引用代码，例如在 HelloWorld 组件中使用蓝色按钮，代码是 “<el-buttontype="primary"> 主要按钮 </el-button>”。

运行结果如图 8-2 所示。

Figure 2. 图8-2　使用element-ui按钮