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.
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:
- 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.
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.