Shulou(Shulou.com)05/31 Report--

This article mainly explains how to solve the pit when vue uses element-ui to introduce on demand. The content in the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn how to solve the pit when vue uses element-ui on demand.

Steps:

Step 1: install element when you install element-ui

Execute the commands npm I element-ui-S and npm I element- S

Step 2: install babel-plugin-component

Execute the command npm install babel-plugin-component-D

Step 3: step 1: the element-ui document modifies the configuration in the .babelrc file, but there is no such folder in our document at all, so what we need to modify is the configuration in the bable.config.js file.

Step 2: the element-ui document prompts you to change the configuration to this, so configure the bable.config.js file like this

But when we start, we will report an error of 'Error: Cannot find module' babel-preset-es2015''

This is due to the lack of dependencies on babel-preset-es2015. Now we execute the command npm I babel-preset-es2015-save download dependencies

Then the error will still be reported after startup, so I checked various documents and learned that the error report about es2015, is for compatibility with ie (9-11), and es2015 needs to be introduced.

So you need to introduce babel-polyfill and babel-preset-es2015 npm into package.json (both need to be downloaded), and then start the project (but this method is easy to report errors due to version mismatch, so it is recommended to use the following method).

Tread 3: you can replace es2015 with this @ babel/preset-env, but you also need to download dependencies. Execute the command npm I @ babel/preset-env-D.

Step on pit 4: but there will also be an error at this time:'# there is an unrecognized mark in the source text.'

That's because npm doesn't recognize the @ symbol, and the solution: just wrap it in quotation marks around the name of the dependent package to be installed.

So the last command executed is: npm I'@ babel/preset-env'-D.

Then the configuration of the bable.config.js file is as follows:

Module.exports = {presets: ['@ vue/cli-plugin-babel/preset', ["@ babel/preset-env", {"modules": false}]], "plugins": [["component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk"}]]}

The configuration pit is over, and then there is the introduction: this introduction document is still good.

But there is one thing to note, step on pit 5:

I used the layout container in the component:

Header Main

I think these are all Container layout containers, which can be introduced in main.js as follows:

/ / element-ui introduces import {Container} from 'element-ui' Vue.use (Container) on demand

The result is always wrong: 'Unknown custom element:-did you register the component correctly? For recursive components, make sure to provide the "name" option. No matter how I checked, I was wrong. I racked my brains, and finally I found out why I didnt report the mistake of el-container, so I succeeded

Each different tag is a different component, and its use needs to be introduced separately, and the correct thing is:

/ / element-ui introduces import {Container,Header,Main} from 'element-ui' Vue.use (Container), Vue.use (Header), Vue.use (Main) on demand Thank you for your reading, the above is the content of "how to solve the pit when vue uses element-ui to introduce on demand". After the study of this article, I believe you have a deeper understanding of how to solve this problem when vue uses element-ui on demand, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.