Methods for referencing element-ui component library in vue2.0

Reference element-ui component library in vue2.0

element-ui is a set of desktop component libraries based on Vue 2.0 developed by the Ele.me team.

Official website:/

Install

npm i element-ui -S

Quote the full element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/';
(ElementUI);

It should be noted that style files need to be introduced separately.

If an error is reported, configure file_loader in . You can directly add the following configuration item in the rules array:

{
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'
}

Introduce components on demand

1. Install the babel-plugin-component plugin:

npm install babel-plugin-component -D

2. Modify the .babelrc configuration file

Will

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

Change to:

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

3. If an error is reported, configure file_loader in .

You can directly add the following configuration item in the rules array:

{
  test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: 'file-loader'
}

4. Use components

import { Button, Select } from 'element-ui';
(, Button);
(, Select);
/* or written as
  * (Button)
  * (Select)
  */

Summarize

The above is the method of citing the element-ui component library in vue 2.0 that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!