VueJS part 8: Creating the Vue app with CLI

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, every time I used VueJS I loaded it from CDN and wrote all the code in a single JavaScript file. In this part, I will cover an alternative way to generate a project using the command line and what benefits we get using it that way.

CDN project and its problems

In all the previous articles I imported Vue from the CDN. All the code was in a single index.html file and a single index.js file. If you are building a small application, that might be ok. But what when you have a larger system? Big company projects, something like a webshop, but even something smaller like a simple to-do list can grow complex. Keeping component template in string. Most templates are in a single file or all the logic code is in a single JavaScript file. It can become very difficult to change anything. Sure, you could split it into smaller JavaScript files, but then you would need to manually add script tags, think of loading order and it will just slow down the initial load. It can just become very messy.

Now let's take it even a step further. What if you wanted to use JSX, Typescript, SASS, or any other similar tool? You could, but then you would need to manually set up compilers as those are not browser-supported.

Benefits of CLI-generated project

Just above, I mentioned using different tools when developing. Tools like Typescript and newer versions of JavaScript from the more popular on are not fully supported. For that, you would need to set up some compiler using the Webpack or something similar.
Thankfully Vue also has an npm package for creating a boilerplate project which would have all these tasks set up. Not only that but out of the box you get many more tools used for optimizations, lazy loading, structure guidelines, local server with hot-reaload while you are developing, testing setup, and many many more.

Dependencies (node, npm)

To use this you will need two tools. NodeJS and NPM, but if you install just Node, you get an NPM out of the box.

Step-by-step generating

Once you installed NodeJS, you can generate the new Vue project. You can do that by opening your terminal in the location where you want to create a project and run the next command.

npx create-vue@latest

During the run, there will be some prompts. At this moment, for this tutorial, choices are not important as we will not go into the project too deep. Also, you might notice I added @latest at the end of the command. That just means it will use the latest version of Vue.

Running the app

At the end of the logs above you can see a few commands. First, you will need to locate your terminal in the project folder. And then you need to run the npm install command. This installs all the dependencies used in your project. You won't need to do this every time, just when you change the dependencies again.
Other commands are:

• npm run format runs prettifier and cleans up your code
• npm run dev builds the application and starts the local server where you can see the output. When you run it, inside of the logs there will be a message saying which port is used.
• npm run build creates a production-ready build of the application
• npm run test:unit runs unit tests There are a few more tasks, but these are the most common ones and you can add your tasks as well.

Project structure

If you open the generated project, first you might notice some files in the root folder of the project. Those are mostly different configuration files like the gitignore, prettier, and environment variables files. Further on, there are some folders as well. First, there is node_modules, a folder containing all the npm dependencies you installed when running the npm install command. Another folder there is the public folder. When you generate a project it contains only favicon, but it could also contain other similar files like the robot.txt and manifest. The last folder there is the src folder. This is where all your application code will go, and if you look at it, it already has some structure for code guidelines there. There are assets for keeping your images and styling files, components for components, and views for your page components. If you choose to install a router when generating the project, there will also be a router folder with its initial configuration. You might notice that all the script files have a Vue extension. These are special files that are used for building vue applications and I will cover them more in the next post.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.