Key knowledge summary of Vue development guide

Overview

If you are new to Vue development, you may have heard a lot of professional terms about it, such as: single-page application, asynchronous components, server-side rendering, etc.

You may also often hear tools and libraries mentioned together with Vue, such as Vuex, Webpack, Vue CLI, and Nuxt.

Maybe you feel helpless and hopeless when facing these unknown terms and tools. It doesn’t matter, you are not alone, because this is the feeling that all newcomers will have when they first come into contact with Vue.

But if you try to master them all at once, these massive systems can easily overwhelm you. To this end, I will present to you a "knowledge graph" here, which contains all the key parts in the professional Vue development process. You can refer to this diagram to guide you in the process of learning Vue in 2019.

0. JavaScript and Web Development Basics

If I ask you to read pure English books in English, then you should learn English first, right?

Likewise, Vue is a JavaScript framework for building web user interfaces. Before you start using Vue, you must have at least a basic knowledge of JavaScript and web development.

1. Basic concepts of Vue

If you are a new Vue developer, you should focus on the core of the Vue.js ecosystem, which includes the Vue core library, Vue Router, and Vuex. Because these tools will be used in most Vue applications. Okay, let's start by introducing some basic concepts about Vue.

Vue core features

At its most basic, Vue keeps web pages and JavaScript in sync, and the features that make this possible are responsive data and template features like directives and interpolation, which you’ll learn on day one.

Before building your first Vue application, you must also understand how to install/use Vue on a web page and understand the life cycle of Vue reference instances.

Components

Vue components are reusable and independent UI elements. You need to understand how to declare components and how to make components communicate with each other through properties and events.

And learning how to combine components is equally important because it determines whether you can build a robust and scalable application with Vue.

Single Page Application

The single-page application (SPA) architecture determines that the web pages you create can display the same rich content as multi-page websites, without inefficient behaviors such as reloading the entire page after the user clicks a link.

Once you have created your "pages" as Vue components, you can use Vue Router for each component to map each request to a unique access path. Vue Router is a tool maintained by the Vue team for building single-page applications (SPAs).

State Management

As the project scale grows, there will be more and more components on many pages of SPA, and managing global state will become more and more difficult. Components become bloated with a large number of properties and event listeners.

A special mode called "Flux" keeps your data in a stable central storage. The Vuex library is also maintained by the Vue team and helps you implement Flux in your Vue.js applications.

2. Vue in production

All the knowledge you gained from Part 1 can be used to build performant and efficient Vue applications, albeit on your local server. So, how do you ensure that they can run in an actual production environment?

If you want to bring Vue.js-based products to users, you need to know more, which will be introduced below.

Project Scaffolding

If you need to build Vue applications frequently, you'll find that almost every project provides configuration, setup, and developer tools.

The Vue team maintains a tool called Vue CLI, which allows you to build a powerful Vue development environment in just minutes.

Full Stack / Authentication Application

Vue applications are usually data-driven user interfaces, and data is usually generated by Node, Laravel, Rails, Django, etc.

Or other server frameworks written in secure API as a source.

Maybe the data is provided by a traditional REST API or GraphQL, or maybe it’s real-time data provided by a Web Socket.

You should also be familiar with design patterns commonly used to integrate Vue into a full-stack configuration, as well as various considerations for keeping user data secure in Vue applications.

If you are evaluating what backend product is the best choice for your Vue application development, then this article should have your answer.

test

If you want to ensure that your Vue application is maintainable and stable in production, you need to provide complete tests for your application.

In a Vue application, unit testing ensures that your components always provide the same properties (rendered HTML or events) for a given input (properties or user input).

The Vue team maintains a tool called Vue Test Utils that allows you to create and execute tests on individual components.

optimization

After you deploy your application to a remote server, the access speed and execution efficiency of the application may not be as fast as it was during the development phase, and it is likely that the speed will be very slow when users access it.

To improve efficiency, we need to optimize your Vue application. We can use various technologies in the optimization process, including server-side rendering. In server-side rendering, the Vue program will be executed on the server, and when the user accesses it, the rendered HTML will be presented to the user, thereby achieving the purpose of improving access speed.

Of course, other optimization techniques are also included, such as asynchronous components and render functions.

3. Key Tools

Everything we’ve seen so far has come from Vue.js core, or from tools in the ecosystem. But Vue does not exist in isolation, it is just one piece of the front-end technology stack.

Advanced development should not only be familiar with Vue, but also familiar with some other key tools, because it may become part of the future Vue application.

Modern JavaScript and Babel

Vue applications can be effectively built with ES5, which is a JavaScript standard supported by almost all browsers.

To enhance your Vue development experience and take advantage of the latest browser features, you can use the latest JavaScript

Build your Vue applications with standard ES2015 features or proposed features for ES2016 and above.

If you choose to use the latest JavaScript features, there will be compatibility issues with older browsers, which will cause your product to lose some users.

How to make it compatible with old browsers? Babel can achieve this goal. Its job is to "transform" (translate and compile) the modern features in your application into standard functionality before publishing the application.

Webpack

Webpack is a module bundler, meaning that if your code is written across different modules (e.g. different JavaScript files), Webpack can also "build" all of those contents into a single file that is readable by the browser.

Webpack can also build pipelines, which allow you to transform your code before building it. For example, using Babel, Sass or TypeScript with Frontend, there are also a range of plugins available to optimize your application.

Many developers find Webpack difficult to understand and configure, but without it, some of Vue’s best features (like single-page components) wouldn’t be possible. We have a series of tutorials on WebPack to help you quickly master the use and configuration of Webpack.

TypeScript

TypeScript is a superset of the JavaScript language, which includes (String, Boolean, Number, etc.). With such type definitions, you can ensure that you can write robust and stable code during development and detect errors as early as possible.

Vue.js 3, which is coming in 2019, will be developed entirely in TypeScript, but that doesn’t mean you have to use it in your Vue projects. But if you need to contribute to Vue by reading its internal code and joining Vue's open source organization, you should at least understand the TypeScript language.

4. Vue Framework

A framework built on top of Vue saves you from having to implement server-side rendering from scratch, create your own component library, and other similar work.

There are many excellent Vue frameworks available, but here we only list the three most widely used frameworks in different fields.

Nuxt.js

If you want to build a high-performance Vue application based on routing, server-side rendering, code separation and other cutting-edge features, and also need some more advanced features such as SEO tags, etc. You can use Nuxt.js framework.

The Nuxt.js framework provides all these features out of the box and more like PWA etc. through its rich community plugins.

Vuetify

Google's Material Design standard is a widely used design language guide system for building beautiful and reasonable user interfaces that are widely used in Google products such as Android and Web systems.

The Vuetify framework implements Material Design in a series of Vue components. This allows you to quickly create Vue applications using Material Design layouts and styles, and implement page widgets such as modal boxes, prompt boxes, navigation bars, paging, etc. in your application.

NativeScript-Vue

Vue.js is a library for building web user interfaces. If you want to use it for building mobile apps, you can use the NativeScript-Vue framework.

NativeScript is a framework for building apps using native user interface components on iOS and Android, while NativeScript-Vues is a framework based on NativeScript that supports Vue syntax and the use of Vue components.

5. Others

In this final section, we will cover some important things that are not included in the above categories.

Plugin Development

If you want to reuse Vue features in your project or contribute to the Vue ecosystem, you can package these features into plug-ins and publish them to other users.

Plugin functionality is an important feature of Vue, and there are many tools and templates to help you create lightweight and efficient Vue code.

Animation

Animation is also part of Vue's core functionality, which allows you to apply animations when adding or removing elements to the DOM. To enable an animation, you create CSS classes that define the desired animation effect, whether it's fading in and out, changing color, or any other effect. Vue will detect when elements are added and removed, and add or remove the classes you set accordingly.

Progressive Web Apps

Progressive Web Applications (PWAs) are similar to regular web applications, but the user experience and performance have been enhanced, and modern features have been added. For example, PWAs include offline caching, server-side rendering, push notifications, etc.

Most PWA features can be easily added to Vue apps via Vue CLI 3 plugins or by using a framework like Nuxt.js, but you’ll still need to learn key technologies, including web app json manifests (minifests) and services.

The above is the detailed content of the key knowledge of the Vue development guide. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!