Create a Vue 3 Project with Vite
Vite is a lightning-fast way to start a new project. In this lesson, we will use Vite to generate a new project with Vue as the framework.
We'll also take a tour of the project that was generated by Vite. Starting with the vite.config.js and going through the index.html entry point, down through main.js and App.vue.
Instructor: [0:00] To be able to build our frontend for our application, we're going to use Vue. I'm going to build our project with Vite. Vite is a project that is created and supported by Evan You. It's a super-fast way to get up and running with any project. It's also cross-platform. It works with Vue, it works with React, and it works with vanilla JavaScript. It's super light and fast, so let's get started.
[0:28] For scaffolding our first Vite project, we can we use this command, npm init vite@latest. Back in our terminal, we'll run that command, npm init vite@latest. If it is the first time you run it, it will prompt you to install before you get to this point. We get to our project name. We're going to create our frontend here.
[0:50] Here are the frameworks we could you use. We use the arrow keys to select. We're going to select Vue, so arrow down and press enter. We can decide if we want Vue, or Vue with TypeScript. We're just going to use JavaScript Vue for this project. That's it.
[1:03] Now we change directory into our frontend. We run npm install or npm i, to install all of the dependencies. Then we could run npm run dev and navigate to our project.
[1:16] If we open up this project in our code editor, there are a few files that's worth calling out. The first is the index.html file, where we have the mounting div declared, and then importing of the script file, which is going to instantiate Vue for our application. Package.json has very little in it, there's very few dependencies. Our vite.config is used instead of Webpack.
[1:40] You can read more about this project on the documentation. The actual Vue application is stored in src. You can see we have a main.js file, which you import { createApp } from 'vue' App from this App.vue file, and then use this createApp to instantiate and mount it to that App div.
[2:00] We have a single-file component that is importing our child component, and then using it in the template. We've got a script tag, a template tag, and a style tag. This pattern is repeated in all of the components -- script, template, and style.