Creating a Vue App using Vite15/4/2023
Pre-requisites
This tutorial requires a code editor, my personal preference that I will be using in this tutorial is Visual Studio Code.
Next, you will need to install Node + npm
Setting up the Vue Project
Create a new folder in your desired space on your machine. I like to keep folder path short and snappy to make it quicker to access in my Terminal / Command Prompt like this:
C:\Projects\[Project-name]
Open Visual Studio Code, go to File and select Open Folder... and select the folder you created for your project
Once you have done this a sidebar will appear on the left-hand side and this is called the Explorer which will display the folder structure and files contained in your project folder. For now, it's empty. Now to start! Go to Terminal and select New Terminal
The Terminal will appear at the bottom. Type this command below but replace "my-project with the actual name you want to use for your project.
npm create vite@latest my-project -- --template vue
Did you know that you can use Vite to create apps with other frameworks like React? All you have to do is use this command, use arrow keys up/down to select your desired template and Press Enter (don't forget to replace "my-project" with your desired name).
npm create vite@latest my-project
Press Enter to submit your command prompt and watch it work its magic in seconds. Once it's finished, it will provide 3 command prompts to use in order to view your project locally.
cd vue-tailwind npm install npm run dev
Whenever you need to use npm commands for your project, make sure your current directory (cd) is the vue project you created. The terminal will tell you which directory you are currently on
When you use "npm run dev" you will be provided a URL.
When you go to this URL in your browser you will see a Vue + Vite boilerplate page.
Notice that the Explorer has been populated with folders and files.
The src (short for source) folder contains the code and assets used to create your app.
The dist (short for distribution) folder gets created when you use the "npm run build" command for the first time. This folder is the production build of your app, the build command bundles all your app files from the src folder into static files. When you are ready to deploy your app to your server, you will need to run this command to create / update the files.
The public folder has files that are copied directly to your dist folder. If you need to import assets into your code, e.g. a header image, then it needs to go inside the src/assets folder instead.
Components are the modular building blocks of your app. Breaking down the elements of your app into components is crucial when developing your app, this is Separation of Concern in Software Engineering. It can help make repetitive patterns of an app more reusable by creating one component such as AppButton.vue and duplicating this code much easier as <AppButton /> It makes the code an app more managable to update. Rather than scanning a file of 1000 lines to update the navigation bar, we can go to the Navigation.vue file.
The README.md (md is short for Markdown Documentation) file provides a space to provide a guide to help develop further on the project e.g. npm commands. But keep in mind that if you deploy your project to a code hosting platform like Github, this README will be public if the repo is public so be careful not to add sensitive information like passwords & host information.
package.json provides information about the app such as name of the app, packages installed on the app and the version numbers of those packages and commands available (listed under scripts: npm run dev, npm run build, npm run preview)
If you made it to this point, woohoo congrats! You have just created a Vue app.
If you're still feeling muddled or stuck at a certain point. Please don't hestiate to let me know so that I can improve this tutorial and clarify some steps better. If you're a pro and there are some points I got wrong or could explain better, also let me know and thank you for taking the time to read my tutorial.
