Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to integrate Vue with element-ui". In daily operation, I believe many people have doubts about how to integrate Vue with element-ui. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to integrate Vue with element-ui". Next, please follow the editor to study!

I. Integration of Vue and element-ui

The official website of element-ui is described in detail. Here is an excerpt of how to integrate into the official website:

1. Install element-ui:npm I element-ui-S2. Introduce ElementUI:

It is divided into full introduction and partial introduction, because the size of all import files is too large, so it is introduced directly:

On-demand introduction requires the help of a plug-in to install the plug-in:

Npm install babel-plugin-component-D

Modify the babel.config.js file:

(note: the babelrc file is modified by the official website, the babel.config.js file is modified by the new version of vue-cli, and the element-ui official website is updated slowly, so it is still the old version.)

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

The above code is the code that modifies the babel.config.js on the official website. It should be noted here that the contents of the babel.config.js in our original project should not be removed, but the above code should be appended to the babel.config.js. The final integrated babel.config.js code is as follows:

Module.exports = {presets: ['@ vue/cli-plugin-babel/preset', ["es2015", {"modules": false}]], "plugins": [["component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk"}]]} 3. You can introduce ElementUI elements as needed.

For example, if Button and Select are introduced, then in main.js:

Bring in components:

Mport {Button, Select} from 'element-ui'

Register the component:

Vue.component (Button.name, Button); Vue.component (Select.name, Select)

Or:

* or written as * Vue.use (Button) * Vue.use (Select) * /

* * Note: * * due to problems such as the label version, a startup error may occur in the vue-cli project after operating according to the official website. Please refer to this article to set and modify the version: https://zhuanlan.zhihu.com/p/217728852.

4. Render UI effects using components

After using element-ui, all components can be rendered using element-ui. Which component to use, find the corresponding component description on the official website and use it. Take Button as an example:

At the bottom, there is also an introduction to Attributes and functions.

Note: after the introduction of element-ui on demand, there is no need to pay attention to which css style is introduced. The relevant styles will be introduced automatically according to the components used.

At this point, the study on "how to integrate Vue with element-ui" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.