Home Web Front-end JS Tutorial How to add element UI components in Vue

How to add element UI components in Vue

Mar 10, 2018 pm 03:13 PM
element Add to components

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"]
}
Copy after login

ElementUI official website description changes the configuration to:

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

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to install the Windows 10 old version component DirectPlay How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

How to modify element.style How to modify element.style Nov 24, 2023 am 11:15 AM

Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.

Tutorial on adding a new hard drive in win11 Tutorial on adding a new hard drive in win11 Jan 05, 2024 am 09:39 AM

When buying a computer, we may not necessarily choose a large hard drive. At this time, if we want to add a new hard drive to win11, we can first install the new hard drive we purchased, and then add partitions to the computer. Tutorial on adding a new hard drive in win11: 1. First, we disassemble the host and find the slot of the hard drive. 2. After finding it, we first connect the "data cable", which usually has a fool-proof design. If it cannot be inserted, just reverse the direction. 3. Then insert the new hard drive into the hard drive slot. 4. After inserting, connect the other end of the data cable to the computer's motherboard. 5. After the installation is completed, you can put it back into the host and turn it on. 6. After booting, we right-click "This Computer" and open "Computer Management" 7. After opening, click "Disk Management" in the lower left corner 8. Then on the right you can

How to add a TV to Mijia How to add a TV to Mijia Mar 25, 2024 pm 05:00 PM

Many users are increasingly favoring the electronic ecosystem of Xiaomi smart home interconnection in modern life. After connecting to the Mijia APP, you can easily control the connected devices with your mobile phone. However, many users still don’t know how to add Mijia to their homes. app, then this tutorial guide will bring you the specific connection methods and steps, hoping to help everyone in need. 1. After downloading Mijia APP, create or log in to Xiaomi account. 2. Adding method: After the new device is powered on, bring the phone close to the device and turn on the Xiaomi TV. Under normal circumstances, a connection prompt will pop up. Select &quot;OK&quot; to enter the device connection process. If no prompt pops up, you can also add the device manually. The method is: after entering the smart home APP, click the 1st button on the lower left

Tutorial to quickly create desktop shortcuts in Win11 Tutorial to quickly create desktop shortcuts in Win11 Dec 27, 2023 pm 04:29 PM

In win11, we can quickly start software or files on the desktop by adding desktop shortcuts, and we only need to right-click the required files to operate. Add a desktop shortcut in win11: 1. Open "This PC" and find the file or software you want to add a desktop shortcut to. 2. After finding it, right-click to select it and click "Show more options" 3. Then select "Send to" - "Desktop Shortcut" 4. After the operation is completed, you can find the shortcut on the desktop.

How to implement calendar component using Vue? How to implement calendar component using Vue? Jun 25, 2023 pm 01:28 PM

Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,

How to add a new script in Tampermonkey-How to delete a script in Tampermonkey How to add a new script in Tampermonkey-How to delete a script in Tampermonkey Mar 18, 2024 pm 12:10 PM

Tampermonkey Chrome extension is a user script management plug-in that improves user efficiency and browsing experience through scripts. So how does Tampermonkey add new scripts? How to delete the script? Let the editor give you the answer below! How to add a new script to Tampermonkey: 1. Take GreasyFork as an example. Open the GreasyFork web page and enter the script you want to follow. The editor here chooses one-click offline download. 2. Select a script. , after entering the script page, you can see the button to install this script. 3. Click to install this script to come to the installation interface. Just click here to install. 4. We can see the installed one-click in the installation script.

How to add watermark to images in Vue? How to add watermark to images in Vue? Aug 19, 2023 pm 12:37 PM

How to add watermark to images in Vue? Vue is a popular JavaScript framework that is widely used for building web applications. Sometimes we need to add watermarks to images in Vue applications to protect the copyright of the image or increase the recognizability of the image. In this article, I will introduce you to a method of adding watermarks to images in Vue and provide corresponding code examples. The first step is to introduce a third-party library for adding watermarks to Vue. It is recommended to use watermarkj

See all articles