Building Vue Single Page Application (part 1)

Following is an introduction tutorial to building a Vue application. It works on MS Windows 10 and Centos Linux 7/8.

Part 1:

• This will build a Vue project with a component called Helloworld.
• Identify basic folder and files
• Know how to instantiate a Vue application
• Know the basic flow
• Know a basic Vue shorthand
• Be able to create string variable
• Be able to create custom function

Part 2:

• Know what is a component
• Be able to create a new component
• Be able to create an array variable
• Know how to display variables in a table format
• Know what is Bootstrap
• Be able to add Bootstrap
• Be able to create a Bootstrap navbar, navbar-brand, navbar-nav and form within navbar

Pre-requisite: 

Nodejs version 12.x

NPM version 6.14.x

Most of the commands will  be at the command line, 

Install VUE

npm install -g @vue/cli

vue --version
@vue/cli 4.5.15

vue create helloworld

Select Vue 3, using arrow keys.

Run server for VUE

cd helloworld

npm run serve

Test the new site by opening a web browser and pointing to URL http://localhost:8080/

Press Ctrl-c to stop the server

Parts of Vue

Following are basic files and folders of interest;

src/main.js : root Vue instance is declared and configured.

src/App.vue : contains root Vue components. Notice the page title is defined here in the value "msg".

public/index.html : Rendering page of target "app" or should Vue instance fail.

src/components/HelloWorld.vue : Codes for the initial page that root Vue has declared.

This concludes creating a default Vue project. In each of the exercise below, view the results with

npm run serve

Exercise:

1. Update variable msg string

Replace the page welcome message with your own in the file src/App.vue

2. Update string using component data

In Vue, there are short hand notations. One of this is ":msg" which is shorthand for our variable msg in "v-bind:msg".

In the file src/App.vue edit the components

  components: {
    HelloWorld
  },
  data(){
    return {
      message: 'This is my custom title!'
    }
  }

Replace HelloWorld place holder with

<HelloWorld :msg="message"/>

3. User input to display variable in popup window

Edit file src/App.vue, add after the line <HelloWorld .....

<input type="text" v-model="message" />
<button @click="alertMessage">Ok</button>

Add another component methods, for the function alertMessage to be called

  data(){
    return {
      message: 'Hello World!'
    }
  },

  methods: {
    alertMessage(){
      alert(this.message)
    }
  }