Use Vue.js to create a single page application _javascript technique for time tracking

Vue.js is very simple. Because it is so simple, people often think it is suitable for small projects. While the real vue.js core knowledge is just a view-layer library, there is actually a set of tools that will allow you to build a complete large-scale spa (single-page application) using Vue.js.

Spa applications can generate a smoother user interaction response when the Web page is not completely reloaded. With good side effects, the SPA also encourages the back end to focus on displaying data endpoints, which makes the overall architecture more detached and may be reusable for other types of clients.

From a developer's point of view, the main difference between spa and traditional back-end rendering applications is that we must treat clients as applications with their own schemas. Typically, we need to deal with routing, data acquisition and persistence, viewing rendering and the necessary build settings to facilitate the modular code base.

For spa based on Vue.js, the following tools will help you:

1. View Layer: Vue.js

2. Routing: Vue-router,vue's official router

3. State management: Vuex, a flux/redux-inspired state management solution

4. Service communication: Vue-resource This is the interface with restful back-end interaction

5. Build tools: Webpack and Vue-loader for module thermal refresh ES2015 and preprocessor and other important components

View Layer

This series assumes that you are already familiar with the basics of vue.js, and the core concept of using Vue.js for large spas is to divide the application into many nested custom components. The components of the data flow are familiar with the props and communication definition events directly to balance the design, the complex components are cut into small decoupled units, easier to maintain.

Router

The official Vue Router library handles the routing of clients while supporting the hash mode and HTML5 historical mode. It is a bit different from the standalone routing library, it integrates with the vue.js depth, and assumes that we map the nested routines to nested VUE components.

When using Vue-router, we implement components as "pages" and use these components to implement party routing changes when the hook function is invoked.

State management

State management is only present when application complexity exceeds a certain level. When more than one component needs to share a mutable application state, it may be difficult to reason and maintain if there are no layers in your application that are specifically designed to manage such shared state.

Server communication

In this case, we'll use the Resful backend, which is a go-vue-event project written in the go language.

Build tools

First, the entire compilation tool chain relies on node.js to manage all use of library packages and tools depending on NPM. Although NPM began as a package manager for Node.js back-end modules, it is now widely used for front-end package management. Because all NPM packages are created using the COMMONJS module format, we need a special tool to "bundle" these modules into a file that fits into the final deployment. Webpack is such a tool that you may have heard of a similar tool browserify.

We will use the Webpack series as it provides more advanced features for out-of-the-box use, such as hot reload, bundle-splitting and static file handling.

Both Webpack and browserify their exposed APIs enable us to load more COMMONJS modules: For example, we can directly require () HTML files by converting them into a JavaScript string.

By using everything from your front end, including html,css and even image files, as a modular dependency, you can transform arbitrarily during the bundle, Webpack actually covers most of the build tasks that you encounter when you build a spa. We are primarily using webpack and common NPM scripts without the need for task runtimes such as Gulp or grunt.

To activate a Vue component in a single page using Vue-loader:

App.vue
<template>
 
 

Webpack and Vue-loader combinations can bring:

：

1. ES2015 by default. This allows us to use the future JavaScript syntax today to produce more expressive and concise code.

2. Embedded processor. You can use a preprocessor in a single file Vue component, such as using Jade as a template, using sass as a style.

3.Vue component Internal CSS output will be prefixed automatically. You can also use any POSTCSS plugin if you like.

4. Scope CSS. By adding a scoped property to <style>, Vue-loader will simulate the output by overriding templates and styles, and CSS within the scope of a particular component will not affect other parts of the application.

5. Hot Refresh. When editing the Vue component during development, the component "eagerly swap" to the running application to maintain application state without reloading the page. This greatly improves the development experience.

Start setting

Now with all these fancy features, it may be a daunting task to assemble your own build stack! Fortunately, the Vue company offers VUE-CLI, a command-line interface that is easy to get started with:

NPM install-g vue-cli
vue init webpack my-project

The CLI has an out-of-the-box feature, as the answer suggests. All you need to do next is:

CD My-project
npm Install # Install dependencies
npm run Dev # start dev server at http://localhost:8080

The above is a small set to introduce the use of vue.js to create a time to track the application of a single page, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!