Original subtitles

In this lecture, we are going to begin developing the first major project for this course.

As always, we need to create a new project with the Create View package.

If you haven't already, I highly recommend working in a directory dedicated to view related projects.

Pause the video if you need to.

I'm already in a directory.

I'd like to create a project in next.

Open the command line.

Let's run the following command and PM in each view at latest.

The package is going to ask us a series of questions.

Unlike previous projects, we're not going to fly by the questions.

This project is going to have a few dependencies rather than configuring these dependencies as we go

along.

Let's allow the view package to perform that step for us.

Firstly, we're going to give our project a name.

Let's call it music.

Next, we are going to be asked for TypeScript support for this course.

TypeScript won't be necessary.

Let's select no.

Afterward the package will ask if you would like JST support.

If you have a background in React, you may be familiar with Gsx.

If not, that's fine.

Gsx is an alternative syntax for writing templates.

In my opinion, there are not many differences between Vue's templating system and Gsx react developers

may be more comfortable with Gsx for this project.

The regular templating system is fine as is lets select no.

Up next, the package will ask about the Vue router package.

This package will allow our application to change URLs without refreshing the page.

Up until now we've been working under a single URL.

However, you may want to split your application into different pages.

This package will help us with this behavior.

Let's select.

Yes, the next question we'll ask for state management support.

Applications are built with several components.

Data can be contained within a component.

In other cases, we may want to share data across several components.

Adding state management support will make this process easier.

Select Yes, testing is another important subject that will be covered in this course.

Select Yes.

For Vitus and Cyprus, the second to last option is lint we've been avoiding is lint.

However, I think it's time to integrate it into our project for Code Quality Assurance Select Yes.

Lastly, we are going to be asked about prettier, which is a code formatting tool we haven't had the

chance to talk about prettier.

Prettier is a code formatting tool for frontend development.

Take a look at this example on the left.

The console statement is not indented, prettier, can fix formatting issues like this example.

On the right, it will properly indent the line of code for us.

We can add consistent formatting to our projects with prettier.

Hold on a moment.

Doesn't Lynch perform the same action?

Sort of.

S lint focuses on code quality.

Look at this example.

The bar variable is unused.

This is not a formatting issue but a code quality issue.

Unused variables are a waste of space.

S lens can help us catch these types of issues.

S.

Lynch does overlap with prettier.

It offers code formatting checks as well.

However, they're not as comprehensive as prettier.

Both tools are great.

Unfortunately, the overlapping can cause problems and inconsistencies.

The view community is aware of these conflicts.

Don't worry by using the Create View package.

These differences will be settled.

Let's select.

Yes.

After a few moments, the project will be ready.

I'm going to point my editor to this project.

You should do the same.

Next, let's install the dependencies with the NPM install command.

After the dependencies have been installed.

Let's start the project with the NPM run dev command.

Lastly, view the app in the browser.

Awesome.

We've successfully installed the project in the following lecture.

Let's review the files generated by the package.