I've opened up the source code in my editor. Let's take a look around and see what Vite gave us out of the box. gitignore file for use with Git version control. json to help us manage the JavaScript dependencies installed via NPM.
js. In here, a Vue plugin for VEET is being imported and registered. Remember, Vite can be used for other front end frameworks besides Vue. So this allows us to quickly and easily make Vite work best with Vue and know how to handle Vue single file components.
There's one more setting I want to add in here so that we can use the at symbol as an alias for the source directory, just like in Vue CLI created projects. json. This file is going to make VS Code a little smarter about our code base. I'm just going to paste in some settings.
The include key tells VS Code that this is the source of the project and that it should concern its IntelliSense decisions only with the files in this directory, in addition to no modules. The base URL option informs VS Code where the base directory to resolve non-relative module names is. And probably most importantly, the paths option makes it so that VS Code can use IntelliSense when we're importing modules using the at symbol alias. That about does it for the files in the root directory.
The source directory is where we write all the code that powers our app. The assets directory is where we put all of our assets that require processing, such as images. On the other hand, static assets that can be served as is can go in the public directory. The components directory is where we can store all of our view components, except for page components.
For now, we only have the default hello world component. While we're here, I'll also create a views directory to store all the view components that will act as the different pages of our application. Pages are often called views, and when you use the Vue CLI, that's the name of the directory that is auto-created for us. I usually prefer to name it pages, but we'll stick with views for consistency with the Vue CLI.
vue. In the template, we can see the markup for the page that was rendered in the browser. It consists of an image of the Vue logo and the Hello World component that was stored in the components directory. Below that is the script section where we can write our JavaScript.
It gets initialized by Vite to use this experimental view three setup feature used for making work with the composition API a little easier. We'll remove that as we won't be using the composition API during the majority of this course. And I'll also remove the hello world component as it will no longer be registered correctly. Finally, at the bottom of the file, we see the styles being applied to the application.
js. This is the entry point for the Vue application and right now is solely responsible for creating the app instance and mounting it to the DOM. js file to add Vue router to the Vue application.