Vue.js에서 프로젝트를 만들고 시작해보십시오 (꽤 초보자 용)
Vue.js가 설치 될 때 완료되면 프로젝트를 만들 수 있습니다.
이전과 마찬가지로 이번에도 VSCode 명령줄에서 작업을 수행합니다.
VSCode 시작 → [View] → [Terminal]로 명령을 시작합니다.
흐름으로서는 아래와 같습니다
① 프로젝트를 만들려는 디렉토리로 이동
② 프로젝트 작성 명령 실행
③개발 서버 실행
순서를 따라 설명해 가고 싶습니다.
① 프로젝트를 만들려는 디렉토리로 이동
변경 디렉터리 명령으로 프로젝트를 만들려는 디렉터리로 이동합니다.
![](https://s1.md5.ltd/image/70705d582a40ba31d8055ac0cdb7e153.png)
cd 프로젝트를 만들려는 디렉토리의 전체 경로
에서 Enter 키를 누르면 이동할 수 있습니다.
② 프로젝트 작성 명령 실행
1. 프로젝트 작성 명령 실행
![](https://s1.md5.ltd/image/9e64d7a2c1e095785bcc403eacd24aa9.png)
vue project 〇〇〇〇(작성하고 싶은 프로젝트명)
에서 엔터 키를 누르면 프로젝트 작성 명령이 실행 아래와 같은 화면이 출력됩니다.
2. 프리셋 설정
![](https://s1.md5.ltd/image/0b80c05f932ff0ec866bdea2f37e8b2f.png)
"프리셋 설정을 선택하십시오"라고 들었습니다.
이번에는 우선 시험으로 작성하므로 맨 아래의 "Manually select feautures"(수동)을 선택합시다.
3. 필요한 패키지 선택
![](https://s1.md5.ltd/image/728eb91291ff57391ef3908db8082179.png)
이것은 나중에 변경할 수 있으므로 이대로 엔터 키를 눌러 진행합니다.
4. Vue.js 버전 선택
![](https://s1.md5.ltd/image/fc3d6941c4692d4ce0d11173fdf918b3.png)
이번에는 Vue.js의 버전을 "2"로 할 것인지 "3"으로 할지 선택 항목이 나왔습니다.
나도 자세한 차이는 잘 모르기 때문에 이번에 조사해 또 기사로 하려고 합니다.
이번에는 우선 「2」를 선택합니다.
5. ESLint 사전 설정 선택
![](https://s1.md5.ltd/image/280ebb4395b62eb00d19efc6a9f395e0.png)
"Eslint + Standard Config"를 선택합시다 (표준)
6. 린트의 실행 타이밍
![](https://s1.md5.ltd/image/91c93283c83ba8964964aafabfcdd03f.png)
그대로 괜찮습니다 (Lint on save)
7. 각종 설정을 개별 파일에 쓰는가? package.json에 쓰는가?
![](https://s1.md5.ltd/image/c0295cce967809a93d6fd4cb93f88795.png)
이번에는 개별적으로 설정합니다.
8. 마지막으로이 설정으로 좋습니까? 확인 메시지가 표시됩니다.
y 키를 누른 후 Enter 키를 누르십시오.
그런 다음 Enter 키를 다시 누릅니다.
그러면 프로젝트 작성 명령이 자자 흐르므로 자주 기다리자.
![](https://s1.md5.ltd/image/3db9b9415a54a14bd3b6ec3c8320f3e1.png)
이 빨간색 프레임과 같은 메시지가 나오면 작성 성공입니다! ! ✨✨✨
③개발 서버 실행
프로젝트를 성공적으로 만들 수 있었으므로 개발 서버를 실행합니다.
![](https://s1.md5.ltd/image/44fc7e51675436ea29969f87fee9cfbe.png)
먼저 변경 디렉토리 명령으로 만든 프로젝트 이름의 폴더로 이동합니다.
cd project-hogehoge
그런 다음 npm run serve를 입력하고 Enter 키를 누릅니다.
서버에 대한 연결이 시작됩니다.
![](https://s1.md5.ltd/image/cb8c9549498d7ba3b7d105f3b9291f69.png)
연결이 완료되면 이러한 화면이 표시됩니다.
빨간색 테두리에 표시된 URL(http로 시작하는 URL)을 브라우저에 입력하여 연결해 봅시다.
![](https://s1.md5.ltd/image/2e39634cc7092fa9d18b0da921eb9c56.png)
이러한 이미지가 표시되는 라 프로젝트의 작성과 기동은 성공입니다! ! !
Reference
이 문제에 관하여(Vue.js에서 프로젝트를 만들고 시작해보십시오 (꽤 초보자 용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ishiki_hikuko/items/9f5516cd47c8e857d2fa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)