Understanding the Use of Vue.js on Static Sites

Asked 1 years ago, Updated 1 years ago, 57 views

I think vue.js and others are mainly suitable for data-oriented dynamic pages such as SPAs.
Can't you somehow bring the following benefits of vue.js (vue-loader) to a typical static site?
I'm thinking about

single component
→ Manage CSS/HTML/JS in one file
→Scoped css can handle

Although it is still a static site, as the number of pages increases and the content expands
It will be very difficult to manage JS and CSS.
(For example, class batting in CSS)

With this single component

·The distance between HTML/CSS/JS may be closer and the outlook may be better
·Scoped css may make css easier to some extent

That's what I thought.

If you would like to know more, please contact us.

If you've ever built a static site for the same purpose,
Please tell me the advantages (good points) and disadvantages of doing so.
Or, if you say, "It's better not to use vue for this purpose in the first place,"
Please let me know if there is anything else I can do similar.

javascript html css vue.js

2022-09-30 21:23

1 Answers

Nice to meet you.I would like to hear your opinion on whether it is appropriate or not to use Vue.js in the construction of static sites. From a personal point of view, I think it is fair to say that in your case, Vue.js is sufficient.

Generally, simple DOM manipulation modules such as jQuery are used to make a move on static sites, but as they grow in size, they eventually become complicated and have to work beyond jQuery's limits.Considering how much your site may scale in the future (in this case, how many pages the site has and how much JavaScript you may use on a single screen), you may choose to use jQuery, but there are many choices to use Vue.js.If you really need to use jQuery for certain operations, it is recommended that you wrap jQuery in the Vue.js component and perform DOM operations.Vue.js has a hook (event) for accepting DOM operations within its component lifecycle, making it easy to integrate with jQuery.

I generally agree with the Scoped CSS perspective.With Vue.js, you can isolate the entire HTML/JS/CSS as a single file component, rather than using vueify, which increases the likelihood that it can be built without strict constraints such as CSS naming conventions.However, depending on the granularity of the components, you may need to be careful about class naming within the components, but we assume that the site is not that large.

As for the disadvantages, at the beginning of development, the learning curve may be a little larger than the HTML+jQuery of Perachi.As development progresses, development efficiency and serviceability always increase, but at first, there are cases where you feel like you're overkill.Also, Vue.js has relatively strict browser support, and if you need to work with older browsers or IE versions, you may need to try polyfill or consider other backward compatible frameworks.I don't think you should use Vue.js in this kind of case.

It's been a long time, but I don't think there are any disadvantages of using Vue.js on static sites.Sorry for the long letter.


2022-09-30 21:23

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.