This article is mainly according to my personal learning route, there may be some deficiencies, if there are defects please big guys point out
Secondly, I personally pursue the latest technology stack. For me, the latest things will bring me motivation to study and explore
Three basic pieces
There is no doubt that HTML, CSS and JavaScript are essential basic knowledge for front-end learning and work. MDN documents are recommended here. The knowledge in them is comprehensive and novel, and they are recognized as an authoritative document
I recommend freeCodeCamp, which provides rich practical courses, from basic page layout to JS algorithm and data structure, to Bootstrap, Jquery, Sass, React and other front-end common development libraries. All courses are free! Quite honestly, if I can learn all the chapters with freeCodeCamp and work with the MDN documentation, I think I can basically get started on the front end
Of course, it doesn’t matter if you can’t finish learning, I think you don’t need to eat fat in one go. The advantage of Vue is gradual learning. You can learn three basic knowledge first, then directly start Vue.
Vue.js
Then there is our protagonist Vue. Vue has developed rapidly in recent years, both at home and abroad, with the right momentum and gradually improved ecology. Of course, React is still a big company at present. First of all, I think Vue is more suitable for the entry-level front-end. After I understand Vue, IT will be easier to learn React by building a set of front-end development thinking in my own knowledge base.
The first is Vue.org. When using official documents, we should mainly understand the significance of Vue, React and other frameworks. What pain points have been solved in traditional front-end development? A framework is popular when it makes developers feel good to use it.
Here I would like to share my personal understanding.
In the past, the front-end code was mixed with PHP and Java template code without the concept of front-end interaction. The back-end generated HTML code to the client according to the template. With the advent of Ajax, the front-end could request data from the back-end interface asynchronously, so that PHP and Java code could be removed from HTML. However, at that time, the front-end code was still included in the webapps directory of a TEMPLATE or SSM project in a PHP project. With the increase of page complexity and the popularity of single pages, front-end projects began to be independent. At this time, various front-end frameworks were in the world. Node.js and WebPack enable the front end to run independently on a service.
However, we have to go back to the nature of the front-end, which is to obtain background data, display data, and process user input. If there is a large amount of data, the page rendering and binding of data become increasingly complex. Therefore, Vue and React are designed to solve the pain points of front-end development in this way. Vue has the characteristics of two-way data binding, virtual DOM, two-way data binding is to solve the traditional front-end development data in response to the pain points, through two-way data binding, page display data with js, save the object variable bindings, one of the data changes corresponding to another data will also change, so that it can greatly facilitate our development, In addition, with the virtual DOM, when the page needs to be re-rendered, only the modified part of the page is rendered through the diff algorithm, thus improving the rendering speed of the page, whereas in traditional development, sometimes only a small part of the page needs to be updated, but the whole page is re-rendered.
I may say the logic is not quite clear, specific or to their hands to experience.
Of course, I also recommend The Progressive JavaScript Framework, which is currently being tested. This document is more novel, and The tutorials in it provide Options and Composition, which are more modern than The current document, but there is no Chinese translation yet. Vue3 is compatible with the writing method of Vue2. Although Vue2 may be easier to understand at the beginning because the Options API looks clearer, Vue3 is the future. The rest of the ecosystem is built around Vue3 and the Composition API. For me, Vue3 offers better TypeScript and FP(functional programming) support, so it’s not a bad idea to jump into Vue3.
vite
To say vUE ecology in the comparison out of the circle, is vite.
Vite is the next generation of front-end development and build tools. Why do you need them? With the development of the front end, we are less likely to write native HTML, CSS, and JavaScript files, and more likely to use TypeScript, Sass, and Vue extensions to improve our development efficiency. But the browser can only run the three most basic files. Therefore, we need a packaging tool to package and compile the file type of the extension we developed into the most original file. At present, the most widely used packaging tool is WebPack, and Vite is the author of Vue, a development tool based on the native ESM developed by us. Actually in the production of packaging when both difference is not big, but vite at development time of experience is more than webpack, if you want to, we definitely need to use in the development of real-time browsing service, is you can view the page at the same time, adjust code is called thermal overload, and when the project is more and more big, webpack thermal overload will be more and more slowly, Vite, however, is always an extremely fast module hot reload, regardless of the size of the application.
So vite is not only suitable for VUE, but also for other React, Svelte frameworks, etc. Of course, it is best to support the son vue. The Vue scaffolding described below is based on Vite, and the latest Vue project on Github is based on Vite, so it is worth going through the official documentation to understand the basic configuration and use of Vite.
The scaffold
If you learn about Vue by watching videos on Site B, they will often use the Vue CLI scaffolding to create a new Vue project
But the projects created by the Vue CLI are based on WebPack, and the configuration options are older (just a personal opinion), so the official new scaffolding create-vue, initialized with the NPM init vue@latest command, is recommended
Create-vue uses Vite by default and offers newer options, such as Pinia for state management instead of Vuex, including Cypress, the component test end-to-end testing tool
In the official new quick Start documentation, create-vue has been used instead of the Vue CLI
Here I also recommend antfu a vite startup template Vitesee, it has 3k stars on GitHub, is the most popular Vite template, the use of technology stack is very new, for learning the latest development of the Vue ecosystem is very helpful.
Routing management
In order to improve the user experience, the front-end page is basically using SinglePage Web Application (SPA). An application with only one Web page is a rich client loaded from a Web server. When hopping to a single page, only partial resources are refreshed. Common resources (SUCH as JS and CSS) need to be loaded only once.
In Vue, in order to conveniently develop a single page application, we need to use a routing management tool to help us achieve page hopping and routing parameter transfer. There are not as many routing tools as React in the Vue ecosystem. Use the official routing tool vue-Router directly.
Note that vue-Router comes in versions 3 and 4. Vue3 is better suited to use vue-router@4, which provides the Composition API for Vue3.
State management
What is state management? You can think of it as a database in the front-end page, which is used to store the data used by one of our front-end applications. This analogy is open to question, however, because not all data needs to be stored in a “database”, and certainly not in Vue3, because the Composition API allows you to combine individual data and data-related functions together, and stripping data from it would affect the structure of your code.
Vuex is the official state management tool of Vue, but its support for TypeScript is mediocre and with the emergence of Vue3, developers have higher requirements for simplicity of code, so Vuex is obviously not favored by developers, while Pinia is a lightweight state management tool developed by Vuex team members. Before that, I wrote an article introducing Pinia: Vue State Management: Using Pinia instead of Vuex.
In create-Vue, the official new scaffold mentioned above, Pinia is used as a state management tool by default
TypeScript
TypeScript is so important to today’s front ends that one of Vue3’s big changes from Vue2 is that Vue3 has refactored TypeScript to better support TypeScript.
So what is TypeScript?
We all know that Javascript is a weakly typed language. A variable can be repeatedly assigned to various types of literals, which makes the development process often encounter the bug of type error. The purpose of using Typescript is to catch type errors in your code as early as possible. Typescript is more tightly integrated with the editor, providing better syntactic completion and checking. Almost all existing front-end tools provide Typescript support or are written in Typescript.
It’s 2022 and you’re still learning TypeScript!
I recommend the official TypeScript manual translated by Hu Yu
Atomization CSS
Atomized CSS has become more and more popular in front-end development. Such frameworks include Tailwind CSS, Windi CSS, and UnoCSS. I wrote a related article about atomized CSS before, “Try ANTfu’s idea of atomized CSS – UnoCSS”. In the 2021CSS annual report, Tailwind CSS has been named the framework with the highest satisfaction with the CSS framework for several consecutive years
Some time ago, Tailwind CSS v3.0 was not officially released. New features such as JIT engine and multi-column layout were added to help us build beautiful pages more quickly
Of course, the use of atomized CSS framework will undoubtedly increase the cost of learning, we have to read official documents while writing code, which needs to consider the pros and cons of their own, need to get started development experience, to know whether they are suitable for.
Vue component library
Using a component library helps us develop our business quickly (no reinventing the wheel), and Vue3’s component library is the main one
- Element Plus: Vue3 version of the old Vue component library Element UI
- Ant Design Vue: This is the Vue version of Ant Design
- Naive UI: Written in TypeScript, the documentation is humorous and I like it very much
- Arco Design: ByteDance opened source some time ago a component library, a relatively clean style
- Vant: The open source mobile component library of the front-end team, one of the mainstream mobile component libraries of Vue
- NutUI: NutUI is jingdong style Vue mobile component library, developing and serving mobile Web interface enterprise products
So many component libraries do not need to learn in depth, in the business development time according to the need to introduce
VueUse
VueUse’s Composition API gives us improved code reuse, similar to the extensive hooks library in React, which is easy to use in Vue. VueUse is the hooks library on Github. Provides a common set of tools for Vue development.
Vue application framework Nuxt.js
Nuxt.js is the mainstream Vue application framework, SSR (server rendering) framework, with UVU live video, GitHub has nearly 40K small stars.
Nuxt offers a faster development experience, out-of-the-box directory routing, support for multiple rendering modes, the ability to render pages with asynchronous data retrieval, and improved SEO (search engine optimization) for web applications.
Nuxt3’s recent release was highly anticipated with a number of new features, including support for Vue3, Vite, native Typescript, and the new server engine Nitro.
END
The above is my share of Vue learning process, of course, to do a project only the above knowledge is not enough, there are such as code formatting, uniform code style, multi-language internationalization, testing tools and other related.
Keep loving programming, embrace open source, and keep exploring!