preface

We will choose to use some libraries around VUE

1. Use node.js background to learn how to obtain data. 2. Implement HTTP request to our node 4. Single data flow 5. Use. Vue file for development

Eventually we’ll build a little demo, so without further ado, we’ll go straight to the diagram above.

The installation

1. We will use Webpack to package, preprocess and hot load our modules. If you’re not familiar with Webpack, it helps us pack multiple JS files into a single entry file and load them on demand. This means that we don’t have to worry about too many HTTP requests due to using too many components, which is very beneficial to the product experience. But we don’t just use Webpack for this, we need to use Webpack to compile.vue files, and if we don’t use a loader to convert the style, JS and HTML in our.vue files, the browser won’t recognize it.

2. Module hot loading is a great feature of WebPack that will make our single page applications a lot easier. In general, when we change the code to refresh the page, all the state in the application is gone. This can be very painful to develop a single page application because you have to run the process all over again. If you have module hot loading, when you modify the code, your code will be modified directly, the page will not refresh, so the state will be preserved.

3.Vue also provides CSS preprocessing, so we can choose to write LESS or SASS in the.vue file instead of native CSS.

4. We used to download a bunch of dependencies using NPM, but now we can choose vue-CLI. This is a great initiative in a VUE ecosystem. This means we don’t have to build our project manually, and it can be generated for us very quickly.

First, install vuE-CLI. (Make sure you have Node and NPM)

npm i -g vue-cli

Then create a Webpack project and download the dependencies

vue init webpack vue-time-tracker

cd vue-time-tracker

npm i

We then run our application in hot load using NPM run dev

This line of command means it will go to the scripts object of package.json and execute Node bulid /dev/server.js. In this file, Webpack is configured to compile the project file and run the server to view our application at localhost:8080.

With all this in place, we need to download two libraries for our routing and XHR requests, which we can find on the vue website.

npm i vue-resource vue-router --save

Initialize (main.js)

Looking at our application files, we can find app.vue and main.js in the SRC directory. In the main.js file, we import Vue and App, and create an instance of Vue (because we introduced the App component router.start(App, ‘# App ‘) on the router line).

// src/main.js import Vue from 'vue' import App from './App.vue' import Hello from './components/Hello.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' // Register two plugins vue.use (VueResource) vue.use (VueRouter) Const router = new VueRouter() // Router map router.map({'/hello': {component: hello}}) router.redirect({'*': '/hello' }) router.start(App, '#app')Copy the code

We also need to wrap our index.html around our

//index.html


       

    

       
Copy the code

That’s the end of our initialization, so let’s start creating other components.

Create a home page View

First, we need to add bootstrap. CSS for our application. For convenience, we will introduce the CDN directly in the header here.

Planning boardCopy the code

Then write a top navigation for our App in app.vue.

// src/App.vue

Copy the code

In addition to our Navbar, we also need a. Container for the rest of the information we need to display. And here we put a router-view tag, which is where the vue-Router switch starts.

Next, we need to create a home.vue as our Home page

// src/components/Home.vue

Copy the code

Now that we need to display Home, we need to start configuring the route. This is as simple as changing Hello. Vue to home.vue in main.js

/ /... router.map({ '/Home': { component: Home } }) router.redirect({ '*': '/Home' })Copy the code

Create task list View

On this page, we need to create our time tracking list.

PS: There is no data on this page now, we will configure it in the background later


// src/components/TimeEntries.vue

Copy the code

The explanation of template, it’s all in one place, so let’s look at our script

// src/components/TimeEntries.vue

Copy the code

Don’t forget to write some desired styles for our component

// src/components/TimeEntries.vue


  .avatar {
    height: 75px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .user-details {
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    margin: -10px 0;
  }
  .time-block {
    padding: 10px;
  }
  .comment-section {
    padding: 20px;
  }
Copy the code

As the new page is added, we continue to configure our routing

// src/main.js

import TimeEntries from './components/TimeEntries.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries
  }
})

//...Copy the code

Creating a Task component

This is a little bit easier and we’ll just give you the code

// src/components/LogTime.vue




Copy the code

This component is very simple just three inputs and then just two buttons, save and we push the data into our list and initialize our timeEntry. To cancel this, we simply route to /time-entries.

Ps: We should normally fill in six pieces of data including name, email address and profile picture. But I’ll do that for the sake of demonstration. We will continue to improve it in the future.

LogTime is a child route of our TimeEntries component, so we still need to configure our router.map

// src/main.js

import LogTime from './components/LogTime.vue'

//...

router.map({
  '/home': {
    component: Home
  },
  '/time-entries': {
    component: TimeEntries,
    subRoutes: {
      '/log-time': {
        component: LogTime
      }
    }
  }
})

//...Copy the code

Create the sidebar component

We currently have a space to the left of our home page that we need to put down a sidebar to count the total time of all projects.

// src/App.vue

  //...

  
       

    
        

      
    
        

    
        

      
    
        

  
       
/ /...Copy the code

Since we store total time on the parent component, we need to pass our total time into our sidebar component.

Write down our two time calculation methods

Copy the code

Finally, we present our Sidebar. Vue



Copy the code

Props: [‘time’].props: [‘time’].props: [‘time’].props: [‘time’].props: [‘time’]

The last

In this chapter, we can learn a lot about vUE’s features.

1. Understand vuE-CLI scaffolding

2. I have a preliminary understanding of Webpack

3. How to use. Vue to develop happily

4. Parent and child component communication

5. Application of routing (subrouting)

In the next chapter, we will combine node to learn vue-Resource to better improve our SPA application

Github address: github.com/MeCKodo/vue…