Vue.js - CLI

In order to have the better development experience, we can use Vue CLI. It can help with:

    * local development server
    * detect changes and reload the page
    * split code to multiple files with export/import

How to install it?

1. Install nodejs

2. Install @vue/cli

    $ npm install -g @vue/cli

Then we can use Vue cli to create a project based on some templates.

    $ vue create vue-hello-world-app

Vue Cli Project Structure

    ├───public

    │───src

    │    ├───assets

    │    ├───components

    │    ├ App.vue

    │    └ main.js

    └─ package.json

/public

It includes a html file (which is the only one html file in this project because we are building Vue SPA).

And the Vue app will be mounted with this div '#app'.

/src

    The JavaScript files we are going to write there.

    This is our main working directory.

/src/main.js

It is the main entry point. Vue project will load the main.js file first 

We imported and used a function 'createApp' coming from Vue framework, and passing config 'App.vue' to create a Vue app.

    import { createApp } from "vue";

    import App from "./App.vue";

    createApp(App).mount("#app");

/src/App.vue

It is the root component.

The format of this file (.vue) is called single file components.

We can wrap html template, js code and css styling together.

<template>

</template>

<script>

export default {

    

};

</script>

<style>

</style>

But you might be curious how browser understand this format?

Actually, the code we write is not the code that runs in the browser. So how does it work?

Our code is written by specific syntax & features which  are provided by Vue. But our browser cannot recognize those code. For example, our browser doesn't understand the single file component format. 

However, projects built with the Vue Cli has lot of tools working on our code to transform that code in a format (standard JavaScript) that works in the browser. 

Therefore, once we run 'vue-cli-service build', Vue Cli will transform those Vue code to Standard JavaScript code.

/src/assets

Store assets such as fonts and images.

/src/components

As convention, we need to put our vue components here.

package.json

Define the dependencies of this project.