Confusion about renaming or case of vue components (files) - Codes Helper - Programming Question Answer

Confusion about renaming or case of vue components (files)

problem description

my project has the following warning on, run dev after upgrading a ui component library:

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.

my understanding is that there is a component name conflict (repetition), and some people say that it is the case of the component name.

main questions

when I return the ui component version, the warning disappears.
then tried to upgrade 5 different versions and found that the above warning appeared whenever there was an upgrade.

several key points to be solved in the problem

is it right to have components with the same name in different folders but not to reference components with the same name in any vue file?
- problem known condition 1: if this warning does not exist in the project before upgrading the ui component, the fallback ui component version warning will disappear
- problem known condition 2: look at the description of the warning, it does look like the vue files that exist in different folders have the same name

Front-end vue.js

Mar.09,2021

found the problem. The updated ui component library imports vue with the path in uppercase .
so, as said on the Internet, it is a matter of uppercase and lowercase!

vue component naming convention
the file name of a single-file component should either always start with the word uppercase (PascalCase), or always be hyphenated (kebab-case).

Bad examples

components/
|- mycomponent.vue


components/
|- myComponent.vue

< hr >

A good example

components/
|- MyComponent.vue


components/
|- my-component.vue

< hr > For more information, please see the vue official website
ide/" rel=" nofollow noreferrer "> vue style Guide

.

Previous: The picture cannot be loaded after angular5 background-img is packaged.

Next: Python regular matching

Benchmarks is a directory in many github projects. What on earth is it for?
there is a benchmarks directory in some open source projects, such as vue , which is very popular now. The literal translation of benchmark means benchmark test. It seems that some functional performance tests can be done. given that there is a test di...

Github javascript front-end vue.js react.js

Feb.28,2021
How to use font-awesome? in a .vue file
how to introduce and use font-awesome in vue projects? If index.html introduces the style file directly, it will report an error. ...

Front-end vue.js icon-font javascript

Mar.02,2021
Why does the font become larger when there is too much text on the p tag?
text suddenly becomes larger when there is too much content. normal effect: : : style: <style lang= scss module> .about_con { padding: 0 20px; .content { margin-bottom:20px; p { font-size: 30px; } .title{ f...

Front-end vue.js html html5

Mar.02,2021
Using the full screen scrolling plug-in fullpage Times error in vue
1. Develop a full-screen scrolling project in vue and use the fullpage plug-in. When you add a second screen, the error code is as follows. 2. checked that the error was missing the root element, but there was no missing root element after careful...

Framework fullpage front-end vue.js

Mar.04,2021
Watch failure in vue
data has watchform this.form.cat_id=1_7eb3340579783ab51bf7e110f7a4f397this.formwatch this.$set(this.form, cat_id , 1_7eb3340579783ab51bf7e110f7a4f397 ),this.formwatch what I don t understand even more is to use this.form.xx=yy to modif...

Front-end vue.js

Mar.09,2021
What is the difference between the width and height of the picture written in width height and css?
I have done a mobile function to simulate scrolling. The scrolling container contains pictures arranged vertically. At the beginning, I wrote the width and height of the pictures in css. Because the simulated scrolling needs to obtain the height of the c...

Front-end vue.js css javascript

Mar.11,2021
Can Mini Program render nesting?
does Mini Program have such a mechanism, or is it written incorrectly? This kind of application scenario is quite common, isn t it? ...

Mini-Program angularjs front-end vue.js javascript

Mar.13,2021
What is the use of vue customizing the merge strategy optionMergeStrategies. Generally for what purpose, you need to customize the policy.
I know that merge strategies can be used when components are reused. In general, for what purpose, you need to customize the policy. There is no specific actual demo. ...

Front-end vue.js

Mar.13,2021
When a nuxt project introduces a rich text editor to refresh the page, it will report an error document is not defined.
error occurs when page refresh is introduced, and the whole project cannot be refreshed if introduced globally solution ...

Front-end vue.js nuxt.js

Mar.14,2021
Can i18n internationalization do key in Chinese?
key ...

Front-end vue.js javascript

Mar.15,2021
How to set multiple defaults in Vue.js? there are too many default values to put in data.
here s the thing. Vue.js has a project to set a lot of default values. There are about 20 or 30 default values. put in data is too long, the subject is just a piece of cake, want to ask if there is a better solution, do not have to put so many, too u...

Xiaobai-turned-to front-end vue.js javascript.

Mar.16,2021
Vue specifies the page jump in Wechat.
above picture, the picture can say clearly green is click to enter, yellow is the return of Wechat in the upper left corner when I enter the list page from A.html, click to enter the editing information, go to the success page, click back to jump to t...

Vue-router front-end vue.js Wechat-public-platform javascript

Mar.18,2021
Processing of websocket in vue
current projects use vue, and native websocket. After logging in to the business, I use a unified js file as the entry for processing websocket, including websocket creation, connection, and message processing. I thought the message I was dealing with wa...

Front-end vue.js websocket

Mar.18,2021
I am working on an application similar to moments, the vue framework, and now I want to implement when editing and sharing text, if there is a line break or space, how can other people see and maintain the same format of the text?
use this edit box, < div contenteditable= "true " > when I edit a line wrap, it automatically adds a p tag, but I pass the data to the service and refresh the data obtained from the page to be displayed on the page, right? this tag is also displayed. ...

Front-end vue.js javascript html5

Mar.18,2021
When VUE-CLI works on a project, how can the requested data be saved as a global?
for example, the user logs in and gets the user data after the login is successful. What if there are multiple JS files that need user data? ...

Front-end vue.js javascript

Mar.21,2021
When will the changed quantity be sent to the backend after the shopping cart is added or deleted?
recently, I was working on a project with vue+elementUI. When I was doing a shopping cart, I was thinking about how it was sent to the backend when the number in the shopping cart changed. If I changed it once, it would definitely be bad. Then I went to ...

Front-end vue.js javascript

Mar.21,2021
A tag download error in vue.js
shortly after I entered VUE, I encountered a download demand and put it directly on the a tag. As a result, I couldn t find the address, but the page img could display it, and the picture could be downloaded under the static file. I don t know why. I a...

Front-end vue.js html

Mar.23,2021
Vue cannot add click event
there is no effect after clicking, and the console does not respond Code section: change(item) { console.log(item); } ...

Html javascript front-end vue.js webpack

Mar.23,2021
Why better-scroll can't scroll with the mouse, it can only be dragged. Embarrassed.
Why better-scroll can t scroll with the mouse, it can only be dragged. Awkward. I don t know 50 meters ...

Front-end vue.js javascript

Mar.23,2021
Why does the vue-cli project use mobile phones to access local IP, pages?
change host to 0.0.0.0, mobile phone can access, but only on iPhone access is the white screen, PC and Android are normal. Notice that when I use IOS9.3 and IOS11, the screen is white. Try a lot of methods on the Internet are ineffective! ...

Webpack front-end vue.js

Mar.23,2021

Menu