소개

지난번 Vue.js 개발 환경 구축 기록 이라는 기사를 썼습니다.
여기에서는 vue-cli를 설치할 때까지를 목표로 했습니다.
이번은 그 계속입니다. 실제로 프로젝트 개발 환경이 완성될 때까지의 절차를 기록합니다.

목표

프로젝트를 하나 만들고 브라우저에서 실행할 수 있는지 확인한다.

했던 일

IDE 준비

무엇을 사용하는지 망설였지만 Visual Studio Code를 설치하려고 했습니다.
이유로는

Azure DevOps를 사용할 수있는 환경이기 때문에

이전 현장에서 조금만 만졌지만 아직 익숙하지 않았기 때문에

곳곳에서 추천되기 때문에

등의 이유로 결정했습니다.

다운로드 페이지 에서 Mac용을 입수.
다운로드 폴더에 Visual Studio Code.app가 저장되었으며 클릭하면 IDE가 시작되었습니다.

프로젝트 초기화

공식 사이트에 vue-cli의 시작 방법이 타고 있었습니다. htps // jp. 아 js. rg/2015/12/28/ゔ에-cぃ/

사용법은 다음과 같습니다.
npm install -g vue-cli
vue init webpack my-project
프롬프트에 답변
cd my-project
npm install
npm run dev # 다장!

매우 간단하게 보입니다.
이 단계를 따라 봅니다.

npm install -g vue-cli

이것은 마지막 기사를 작성했을 때 수행되었습니다.

vue init webpack my-project

자신의 workspace 내에서 실행합니다.

$ vue init webpack my-project

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

말하는대로

$ npm install -g @vue/cli-init

npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/[email protected]
added 253 packages from 207 contributors in 15.257s

또 한번

$ vue init webpack my-project

프롬프트에 답변

위의 명령을 실행하면 프롬프트에서 프로젝트를 설정하는 방법을 묻습니다.
답변 형식은 몇 가지 있습니다.

(Y/n)을 눌러 선택

화살표 키로 선택 Enter

? Project name my-project
? Project description A Vue.js project
? Author 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

질문이 끝나면 프로젝트 작성이 시작됩니다.
끝나면 実行ディレクトリ/プロジェクト名 아래에 파일이 생성되었습니다.

cd my-project

cd my-project

npm install

npm install

audited 1744 packages in 10.551s

29 packages are looking for funding
  run `npm fund` for details

found 580 vulnerabilities (566 low, 9 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm run dev

$ npm run dev

 DONE  Compiled successfully in 6781ms                                                                                              16:13:48

 I  Your application is running here: http://localhost:8080

할 수있었습니다


중지하려면 Control + c

Visual Studio Code에서 열기

Welcome page의 Open folder에서 이전에 init한 폴더를 선택합니다.

사이고에게

개발을 시작할 준비가 마침내 준비되었습니다.
여기에서 실제로 소스를 만지는 것은 또 다른 기사에 남아 있습니다.

도움을 받은 사이트

【2018년판】vue.js를 mac에 넣어 움직일 때까지 해 보았다