current position:Home>Vue has reduced its workload by half since using components

Vue has reduced its workload by half since using components

2022-05-15 05:03:50CRMEB

Paid use of knowledge script Tags introduced Vue.js. Components can also be used in projects , Complete some public business . With H5 Take the login pop-up window as an example , Explain the use of components in knowledge payment .

The login pop-up window can be used in multiple business scenarios , If you repeat a set of login pop-up windows under each business scenario , Will make the code redundant , And the later maintenance is cumbersome . here , We can peel off the login code , It can be introduced where it needs to be used . This not only streamlines the code , And it's easier to maintain later , There is no need for new functional requirements , Make code changes in multiple places .

Under current project , There are two ways of stripping . One way is to write the login business code in a separate JavaScript In file , Among them DOM Fragments need string splicing ; Another way is to use plug-ins , There will be DOM Fragment HTML file 、JavaScript file 、CSS Combine files .

String concatenation :
In early projects , That's how it works .

image.png

As shown in the figure above , The template content in the figure is spliced with strings . Once there are too many strings spliced in this way , It will appear that the code is messy , And it's easy to make mistakes .

combination :
Project use RequireJS Modular development , So we can use it text.js and css.js plug-in unit , introduce HTML and CSS.

image.png

As shown in the figure above , We will log in to the... Of the component HTML、CSS and JavaScript Files in base_login Under the folder .

image.png

As shown in the figure above ,base_login Files in the folder .

image.png

As shown in the figure above , This is a index.html The content in .

image.png

As shown in the figure above , This is a index.css The content in .

image.png

As shown in the figure above , This is a index.js The content in , It introduces index.html and index.css file .

image.png

As shown in the figure above , Use the login component in the page , First introduced , Reuse .

image.png

As shown in the figure above , This is the use of components .

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ~

link : https://pan.baidu.com/s/14G-b...
Extraction code : yu27
Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ~

Open source address
Code cloud address :
http://github.crmeb.net/u/defu

Github Address :
http://github.crmeb.net/u/defu

Open source is not easy ,Star Show respect , Interested friends welcome Star, Submit PR, Maintain open source projects together , Benefit more people !

copyright notice
author[CRMEB],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205111125085390.html

Random recommended