Posted on Oct 17 • Originally published at kristijan-pajtasev.Medium 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.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.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.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.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.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.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: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.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse NathLowe - Oct 3 Szymon - Oct 2 Mosimi Akinlabi - Oct 14 Eran Sakal - Oct 2 Once suspended, hi_iam_chris will not be able to comment or publish posts until their suspension is removed. Once unsuspended, hi_iam_chris will be able to comment and publish posts again. Once unpublished, all posts by hi_iam_chris will become hidden and only accessible to themselves. If hi_iam_chris is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Kristijan Pajtasev. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag hi_iam_chris: hi_iam_chris consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging hi_iam_chris will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.