In this video, we're going to create our project using the Vue CLI. If you already created the project using Vite, feel free to skip this video and the next. Then you can pick back up on the adding routes and content lesson. js development.
allowing you to quickly scaffold a new project through the terminal. If you have never worked with the Vue CLI before, then you will need to install it using the terminal. I'll open the terminal at a specific directory on my machine by navigating to my desired project location in the Finder window. then right-clicking on the desired directory and choosing New Terminal at Folder.
The Vue CLI will be installed globally, but once we get ready to create the project in just a minute, we'll already be in the directory in the terminal where we want the project to reside. Now type npm install-g at Vue CLI. Or if you prefer yarn, you can type yarn global add at Vue CLI. But I always prefer using NPM.
And then press enter. Great, the CLI has been installed globally. I will clear out my terminal just to clean it up a little bit. Now let's actually create the project.
We'll do this by typing view, create, and then the name of the project. We'll call it View School Travel App. And then press enter. This will present you with several options to get started.
we'll choose Manually Select Features. Use the arrow keys to navigate to this option and press Enter. Out of all the options presented, we want to use the following three, Babel, Router, and Linter slash Formatter. Babel will give us access to the latest JavaScript language features before they hit the browsers.
Router is what we're focusing on in this course and what powers the navigation between pages in our Vue SPA. Finally, the linter formatter will help keep our code clean and error-free. Use your arrow keys and the space bar to choose the required options. Once you've selected all three, press Enter.
Next, Vue CLI wants to know what version of Vue we want to use. Choose view three. If you don't see view three, you probably have the old Vue CLI installed. You should uninstall your current version and install the latest.
See the docs for the Vue CLI in the links below for more information. Use history mode for router. Press enter here for yes. We'll talk more about history mode later on.
Pick a linter slash formatter config. Let's choose eslint plus prettier. Pick additional lint features. Press Enter to choose lint on save.
Where do you prefer placing config for Babel, eslint, et cetera? In dedicated config files. Press Enter. Save this preset for future projects, press Enter for no.
Now you'll see the Vue CLI doing the work to get our project started. It might take a minute, so feel free to pause the video as you wait for it to finish. Great, our project is created. Now type cd view school travel app, and then hit enter to change into our project directory.
Now let's serve our app by running npm run serve. adad in the browser, we'll see what Vue CLI has created for us. This is what the boilerplate for all new projects created via the Vue CLI look like. As you can see, we've already got two routes, home and about, already created for us out of the box.
In the next lesson, we'll open up the code and start making this app our own.