Summary of the Vue

If you’re new to Vue development, you’ve probably heard a lot of jargon about single-page applications, asynchronous components, server-side rendering, etc., or about vUe-related tools and libraries such as Vuex, Webpack, Vue CLI, and Nuxt.

So what exactly is a Vue and what does it do?

Vue.js is a set of progressive frameworks for building user interfaces. It is mainly used for building front-end interfaces quickly. Unlike other large front-end frameworks, Vue is designed to be applied layer by layer from the bottom up.

Compared to Angular.js, Vue’s core library focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects, making it the preferred front-end framework for start-up projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.

In isolation, vue.js is a front-end library for building user interfaces, which itself has many advantages of responsive programming and componentization. Reactive programming is a programming paradigm oriented to data flow and change propagation. Static or dynamic data flow can be easily expressed in a programming language, and the related computing model will automatically propagate the change value through the data flow.

Responsive programming is widely used in front-end development and can be found in most front-end MVX frameworks. Compared to angular. js and react. js, Vue. Js doesn’t introduce many new concepts, just a simplification of existing ones. In addition, vue.js draws on the componentalization idea of React. Js to make application development easier and realize the purpose of modular development.

Vue. Js has been praised for being lightweight and easy to use compared to angular. js and react. js. The DEVELOPMENT mode of MVVM also frees up the front-end from the traditional DOM manipulation. Developers no longer need to waste time on the maintenance of views and data, and only need to pay attention to the changes of data. Also, Vue’s rendering layer is based on a lightweight Virtual-DOM implementation, which increases initialization speed and memory consumption by 2-4 times in most scenarios. At the same time, more and more mobile clients begin to support the use of vue. js for development, so we can firmly believe that it will become possible to use vue. js to create a three-terminal consistent Native application.

As an emerging front-end framework, vue.js draws heavily on excellent front-end frameworks such as Angular.js and React.js. In terms of version support, vue. js has abandoned IE8 support and has certain requirements for mobile terminal support, that is to say, mobile cross-platform development using vue. js requires Android 4.2+ and iOS 7+ support.

If the reader is working on a project with the separation of the front and back ends, or an entrepreneurial project that wants to use vue. js to create a three-terminal consistent Native experience, vue. js will be a good choice.

Vue circuit diagram

As the saying goes, you can’t get fat at one sitting. How does a novice learn Vue? How do I go further? What advanced knowledge do you need to master? To answer these questions, take a look at a skill map for Vue.

JavaScript and Web basics

Before you can start using Vue, a JavaScript framework for building Web user interfaces, you must understand the basics of JavaScript and Web development.

It is also necessary to master some core knowledge of the vue.js ecosystem, including the Vue core library, Vue Router and Vuex.

Vue core functions

Basically, Vue is a JavaScript framework for synchronizing web pages. Key features to achieve this are reactive data and template capabilities such as instructions and interpolation.

To build a Vue application, you also need to know how to install Vue in a web page and understand the life cycle of Vue instances.

component

Second, Vue components are independent reusable UI elements. Therefore, you need to understand how to declare components and how to interact with them through prop and Events.

It is also important to understand how to compose components, as this is critical to building robust, scalable applications using Vue.

Single-page applications

The single-page application (SPA) architecture provides the same functionality as a traditional multi-page web site with a single web page, without reloading and rebuilding the page each time a user triggers navigation.

After the “pages” have been built as Vue components, each “page” can be mapped to a unique path using the Vue Router, a tool for building spAs maintained by the Vue team.

State management

As applications grow larger and projects become more complex, SPA pages have many components, managing global state becomes difficult, and components become bloated with the addition of prop and Event listeners.

This is where a special pattern called Flux comes in, which keeps data in predictable and stable central storage. The Vuex library maintained by the Vue team can help you implement Flux in vue.js applications.

Vue in combat

The scaffold

If you build Vue applications regularly, you’ll find that almost every project needs to provide configuration, Settings, and developer tools.

The Vue team maintains a tool called the Vue CLI that allows you to launch a powerful Vue development environment in minutes.

Full stack applications

In real development, a real Vue application is usually data-driven user interface rendering. The data typically comes from apis developed using Node, Laravel, Rails, Django, or other server frameworks.

This data may be data provided by a traditional REST API or GraphQL, or it may be real-time data provided through a Web socket.

So, you also need to understand common design patterns for integrating Vue into the full technology stack, as well as ensuring the security of user data for Vue applications.

test

If you want to ship maintainable and stable Vue applications, you also need to test them (unit testing, snapshot testing, black box testing, etc.).

In a Vue application, you can unit test to ensure that your component can provide the same output (that is, re-rendered HTML or emitted events) for a given input (that is, prop or user input).

The Vue team maintains a tool called Vue Test Utils for testing individual Vue components.

To optimize the

When you deploy your application to a remote server and users access it over a slow connection, it is not as fast and efficient as you would test in a development environment.

To optimize the Vue application, we can employ a variety of techniques, including server-side rendering, which executes the Vue application on the server side and then outputs the HTML page to the user. Other optimizations include the use of asynchronous components and rendering functions.

The development tools

As the saying goes, sharpening the knife does not mistakenly cut wood, writing code is the same, master Vue development related tools and scaffolding, can greatly improve the development efficiency.

JavaScript and Babel

To get an enhanced Vue development experience and take advantage of the new browser capabilities, you can build Vue applications using the capabilities provided by the latest JavaScript standards ES2015 and ES2016 or later.

However, if you choose to use modern JavaScript, you need to provide a way to support older browsers, or your product may not work for most users.

To do this, you can use Babel. Its job is to “translate” (translate and compile) your modern features into standard syntax before the application is released, such as ES6 to ES5 that the browser will recognize.

WebPack

Webpack is a module bundler, and if your code spans different modules (such as different JavaScript files), Webpack can “build” those bits of code into a single file that the browser can read.

Webpack can also serve as a build pipeline, where you can transform code before you build it, such as using Babel, Sass, or TypeScript, and use a range of plug-ins to optimize your application.

Many developers find Webpack difficult to master and cumbersome to configure, but some of Vue’s useful features (such as single-file components) cannot be used without it.

The recently released Vue CLI 3 provides a solution for abstracting and automatically configuring Webpack in Vue projects.

Does this mean you don’t need to learn Webpack anymore? Of course not, because you will still inevitably need to customize or debug the Webpack configuration.

TypeScript

TypeScript is a superset of the JavaScript language, essentially adding optional static typing and class-based object-oriented programming to the language. We are given types (String, Boolean, Number, and so on) so that we can write robust code and catch errors early.

Version 3 of vue.js, due in 2019, will be written entirely in TypeScript. So learning TypeScript is essential.

The framework of the Vue

A framework built on top of Vue allows you to create your own component libraries and customize many other common tasks without having to implement server-side rendering from scratch.

Nuxt.js

If you want to build a high-performance Vue application, you will need to practice based on component routing, server-side rendering, code splitting, and other features.

Nuxt.js, as a lightweight application framework based on Vue. Js, can be used to create server-side rendering (SSR) applications, and can also act as a static site engine to generate static site applications, with elegant code structure layering and hot loading features.

Nuxt.js provides these functions out of the box through various community plug-ins, as well as more functional options such as PWA.

Vuetify

Google’s Material Design is a very widely used page style guide for building beautiful logical user interfaces that are used in Google products such as Android and the Web.

Vuetify implements Material Design in a series of Vue components. As a result, you can quickly build Vue applications using Material Design layouts and styles, as well as widgets such as modes, alerts, navigation bars, paging, and so on.

Vuetify supports SSR(server-side rendering), SPA(single-page application), PWA(progressive Web application), and standard HTML pages.

NativeScript-Vue

Vue.js is a library for building Web user interfaces. If you want to use it for native mobile interfaces, use the Nativescript-Vue framework.

NativeScript is a system for building applications on iOS and Android using native user interface components, while Nativescript-Vue is a Nativescript-based framework that provides the syntax of Vue and how components are used.

other

Plug-in development

If you want to reuse Vue functionality in your project or contribute to the Vue ecosystem, you can develop functionality as a Vue plug-in.

animation

If you need to use animation, then you need to know about Vue’s transition system, which is also part of Vue’s core. You can apply animation by adding elements to or removing elements from the DOM.

You’ll need to create CSS classes to define the desired animation effects, whether it’s fade-in, change colors, or whatever else you prefer. When an element is added to or removed from the DOM, Vue detects these changes and adds or removes the corresponding CSS class during the transition.

Progressive Web applications

Progressive Web applications (PWA) are just like regular Web applications, but with an improved user experience. For example, PWA might include offline caching, server-side rendering, push notifications, and so on.

Most PWA features can be added to Vue applications via the Vue CLI 3 plug-in or using frameworks such as Nuxt.js, but you still need to know some key technologies, including The Web App Manifest and ServiceWorker.

If you are interested in PWA, then you are recommended to check out some PWA official website.