Creating a new Vue project

In this shot, we will be creating a Vue project as a follow up to ‘Getting started with Vue JS’.

So, it’s time to create our first project. To do that, run the command vue create [project name]. For example, let’s create a project named hello-world:

vue create hello-world

You will then be presented with some preset options asking you whether you want to start your project with a Vue supported library or go with the default. For now, let’s select the default – use the arrow keys to move between the options and press the enter key to select.

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

ESlint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. Its goal is to avoid bugs and make code more consistent.

As long as you are connected to the internet, your installation will start immediately. A folder will be created for the project and all the default dependencies are installed; it might take a minute depending on your internet speed, but you will get a screen similar to this:

When the installation is done, you will see this:

Run the following commands to enter your project folder and run the application:

cd hello-world

npm run serve

The application compiles, and when it is done, you will see something like the following. The application will be served on your local machine, in development mode, on a particular port. In my case it is served on port 8081:

Visit the address in your browser (i.e, http:localhost:8081) and you should have the official landing page of Vue Js.

Congratulations on creating your first Vue app! Now, let’s check out what makes up our app and where all the information that we have on the landing page came from.

-Project Structure

Navigate to your project folder, in your file explorer, and open it in the editor of your choice. I use Microsoft’s vs-code editor, which you can install here.

After you open the folder in your editor, look on the left pane. You should have folder files as such:

-Node_Modules

The node_modules contain the Vue core and other dependencies. When we install/add new dependencies, the files are stored in the node_modules and can be accessed from there.

-Public

The public folder contains a single Html file where our app renders.

The compiled Javascript code targets the div with the id of app, and injects the built files into that div (just like the common ID tag targeting done using vanilla Javascript).

-package.json and other config files

Within package.json, there is a JSON object that contains information about the project, the name, version, scripts used to run the project, dependencies, and other app configuration information.

.gitignore contains a list of files and folders we wish to ignore when running a version control system. The files listed in the .gitignore will not be pushed to our repo by default.

README.md is our standard read me text file to pass information about the project to other users or collaborators.

babel.config.js houses the babel configurations for the project.

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree or package.json.

-src

This is where most of our work happens; this is where we write Vue codes, create our components, and store the project assets. It also contains one very important file named main.js.

main.js is the entry point into a Vue application. It is where the root Vue instance is declared and configured. The code in main.js looks like this:

On line 1, above, we import Vue from the ‘vue’ npm package, which is located in our node_modules/ folder.

On line 2, we import the main Vue component named App from ./App.vue.

On line 6-8, we mount our component to #app — this is where we declare div id="app" in our public/index.html as the rendering target of our VueJS app.

Now, let’s take a look at the main Vue component (App.vue) which is also in the src folder. Vue uses the Single File Component (SFC) model where the markup, style, and script are contained in one single file with the .vue extension.

This is how our App.vue SFC looks like in this case:

In the script tag, we import another component, HelloWorld, from './components/HelloWorld.vue. We then have our Vue instance defined in the export default` object. In this Vue instance, we have to register the imported component as seen here: