How to add element UI components in Vue

This time I will show you how to add element UI components to Vue. What are the precautions for adding element UI components to Vue? The following is a practical case, let’s take a look.

According to the document, the on-demand loading module needs to be configured (if it is not loaded on demand, there is no need to change this file).babelrc file;

The content of the file pre-generated by er1vue-cli is:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

ElementUI official website description changes the configuration to:

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

In fact, node will report an error when npm run dev. The official recommendation is babel-preset-env to replace es-2015 for compilation;

How to use it in vue2.x? How to configure it? Note that it is added in the file main.js. For example, we want to use the time selection component;

import { DatePicker} from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(DatePicker);

This is ok; in other You can use it directly on any page, such as

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Related reading:

ES6’s set data structure and map data structure

Assignment and Symbol of ES6 objects

The above is the detailed content of How to add element UI components in Vue. For more information, please follow other related articles on the PHP Chinese website!