Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,060 --> 00:00:05,020
In this lecture, we are going to begin developing the first major project for this course.
2
00:00:05,040 --> 00:00:10,090
As always, we need to create a new project with the Create View package.
3
00:00:10,110 --> 00:00:16,410
If you haven't already, I highly recommend working in a directory dedicated to view related projects.
4
00:00:16,440 --> 00:00:18,390
Pause the video if you need to.
5
00:00:18,420 --> 00:00:19,920
I'm already in a directory.
6
00:00:19,920 --> 00:00:22,800
I'd like to create a project in next.
7
00:00:22,800 --> 00:00:24,060
Open the command line.
8
00:00:24,060 --> 00:00:28,980
Let's run the following command and PM in each view at latest.
9
00:00:31,070 --> 00:00:34,310
The package is going to ask us a series of questions.
10
00:00:34,340 --> 00:00:38,370
Unlike previous projects, we're not going to fly by the questions.
11
00:00:38,390 --> 00:00:44,180
This project is going to have a few dependencies rather than configuring these dependencies as we go
12
00:00:44,180 --> 00:00:44,750
along.
13
00:00:44,750 --> 00:00:49,110
Let's allow the view package to perform that step for us.
14
00:00:49,130 --> 00:00:52,100
Firstly, we're going to give our project a name.
15
00:00:52,100 --> 00:00:53,810
Let's call it music.
16
00:00:55,910 --> 00:01:00,680
Next, we are going to be asked for TypeScript support for this course.
17
00:01:00,680 --> 00:01:02,660
TypeScript won't be necessary.
18
00:01:02,660 --> 00:01:04,220
Let's select no.
19
00:01:04,489 --> 00:01:08,720
Afterward the package will ask if you would like JST support.
20
00:01:08,720 --> 00:01:13,040
If you have a background in React, you may be familiar with Gsx.
21
00:01:13,040 --> 00:01:14,630
If not, that's fine.
22
00:01:14,660 --> 00:01:18,650
Gsx is an alternative syntax for writing templates.
23
00:01:18,650 --> 00:01:26,000
In my opinion, there are not many differences between Vue's templating system and Gsx react developers
24
00:01:26,000 --> 00:01:29,600
may be more comfortable with Gsx for this project.
25
00:01:29,600 --> 00:01:34,220
The regular templating system is fine as is lets select no.
26
00:01:34,520 --> 00:01:38,810
Up next, the package will ask about the Vue router package.
27
00:01:38,810 --> 00:01:44,390
This package will allow our application to change URLs without refreshing the page.
28
00:01:44,420 --> 00:01:48,050
Up until now we've been working under a single URL.
29
00:01:48,080 --> 00:01:52,460
However, you may want to split your application into different pages.
30
00:01:52,460 --> 00:01:55,190
This package will help us with this behavior.
31
00:01:55,190 --> 00:01:56,330
Let's select.
32
00:01:56,330 --> 00:02:01,310
Yes, the next question we'll ask for state management support.
33
00:02:01,310 --> 00:02:04,220
Applications are built with several components.
34
00:02:04,220 --> 00:02:07,070
Data can be contained within a component.
35
00:02:07,070 --> 00:02:12,050
In other cases, we may want to share data across several components.
36
00:02:12,050 --> 00:02:15,980
Adding state management support will make this process easier.
37
00:02:16,040 --> 00:02:21,770
Select Yes, testing is another important subject that will be covered in this course.
38
00:02:21,770 --> 00:02:22,910
Select Yes.
39
00:02:22,910 --> 00:02:30,770
For Vitus and Cyprus, the second to last option is lint we've been avoiding is lint.
40
00:02:30,800 --> 00:02:37,640
However, I think it's time to integrate it into our project for Code Quality Assurance Select Yes.
41
00:02:37,670 --> 00:02:44,120
Lastly, we are going to be asked about prettier, which is a code formatting tool we haven't had the
42
00:02:44,120 --> 00:02:46,040
chance to talk about prettier.
43
00:02:46,980 --> 00:02:50,850
Prettier is a code formatting tool for frontend development.
44
00:02:50,880 --> 00:02:53,610
Take a look at this example on the left.
45
00:02:53,640 --> 00:02:59,790
The console statement is not indented, prettier, can fix formatting issues like this example.
46
00:02:59,820 --> 00:03:03,820
On the right, it will properly indent the line of code for us.
47
00:03:03,840 --> 00:03:07,770
We can add consistent formatting to our projects with prettier.
48
00:03:07,830 --> 00:03:09,050
Hold on a moment.
49
00:03:09,060 --> 00:03:11,730
Doesn't Lynch perform the same action?
50
00:03:11,730 --> 00:03:12,690
Sort of.
51
00:03:12,720 --> 00:03:15,330
S lint focuses on code quality.
52
00:03:15,360 --> 00:03:16,810
Look at this example.
53
00:03:16,830 --> 00:03:19,140
The bar variable is unused.
54
00:03:19,170 --> 00:03:23,010
This is not a formatting issue but a code quality issue.
55
00:03:23,040 --> 00:03:25,800
Unused variables are a waste of space.
56
00:03:25,830 --> 00:03:29,520
S lens can help us catch these types of issues.
57
00:03:29,640 --> 00:03:30,130
S.
58
00:03:30,150 --> 00:03:32,560
Lynch does overlap with prettier.
59
00:03:32,580 --> 00:03:35,050
It offers code formatting checks as well.
60
00:03:35,070 --> 00:03:38,100
However, they're not as comprehensive as prettier.
61
00:03:38,130 --> 00:03:39,750
Both tools are great.
62
00:03:39,780 --> 00:03:45,060
Unfortunately, the overlapping can cause problems and inconsistencies.
63
00:03:45,820 --> 00:03:48,780
The view community is aware of these conflicts.
64
00:03:48,790 --> 00:03:52,010
Don't worry by using the Create View package.
65
00:03:52,030 --> 00:03:54,190
These differences will be settled.
66
00:03:54,190 --> 00:03:55,180
Let's select.
67
00:03:55,180 --> 00:03:55,960
Yes.
68
00:03:58,120 --> 00:04:01,130
After a few moments, the project will be ready.
69
00:04:01,150 --> 00:04:04,150
I'm going to point my editor to this project.
70
00:04:04,180 --> 00:04:05,620
You should do the same.
71
00:04:07,480 --> 00:04:12,760
Next, let's install the dependencies with the NPM install command.
72
00:04:14,890 --> 00:04:17,320
After the dependencies have been installed.
73
00:04:17,320 --> 00:04:21,339
Let's start the project with the NPM run dev command.
74
00:04:26,560 --> 00:04:29,170
Lastly, view the app in the browser.
75
00:04:31,450 --> 00:04:32,020
Awesome.
76
00:04:32,020 --> 00:04:35,950
We've successfully installed the project in the following lecture.
77
00:04:35,980 --> 00:04:39,190
Let's review the files generated by the package.
6712
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.