Vue cli3에서 Vue+TypeScript 환경 만들기

2013 단어 TypeScriptVue.js
Vue와 Tyspescript를 이용한 개발이 시작되었기 때문에 포착할 수 있는 환경을 만들어 보았습니다.vue-cli를 사용하면상호작용으로 프로젝트 템플릿을 만들기 때문에 문제없이 환경을 만들 수 있습니다.
우선 vue-cli를glaobal에 떨어뜨립니다.Vue CLI는 Vue입니다.js를 위한 응용 프로그램의 개발 환경을 설정하는 명령행 도구입니다.Nodejs가 기존 환경으로 설정된 경우(v8.11.2)
$ yarn global add @vue/cli
설치 후 환경이 완비되었는지 확인하십시오.
$ vue --version
> 3.5.1
vue 명령을 사용하여 vue 프로젝트를 만듭니다.이번에는 포트폴리오 제작 프로젝트를 위해 vue create 로 제작했습니다.
$ vue create portfolio
이렇게 하면 미리 설정한 선택을 묻는 질문을 받을 수 있기 때문에 기본 (babel, eslint) 이나 안내서 (각종 기능을 추가할 수 있음) 를 선택하십시오.이번에는 TypeScript를 사용하기 때문에 매뉴얼을 선택합니다.
Vue CLI v3.5.1
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features
스페이스에 필요한 기능을 추가해서 프로젝트를 만듭니다.필수 기능은 Babel, TypeScript, Linter 등이지만 이번에는 연습용 그룹 사이트여서 모든 기능이 열렸다.
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
일단 위의 기능들을 살펴보도록 하겠습니다.
  • Babel:javascript의 버전 차이 제거.
  • TypeScript: 모델 nJavascript 포함
  • PWA support: PWA 기능 사용 지원
  • Router: URL 섬유 구현 쉬워짐
  • Vuex: vue 상태 관리 라이브러리
  • CSS Pre-processors: Sass, Scss 등 사용 가능
  • Linter:Linter
  • UnitTesting: 단일 테스트
  • E2E 테스트: 결합 테스트
    • 여기서 모두 설정하고 Enter 를 누르면 프로젝트를 만듭니다.그런 다음 디렉토리를 변경하고 서버를 시작합니다.
     $ cd portfolio
 $ yarn serve
    따라서 로컬 서버가 시작되어 접근할 수 있습니다.
    [PC]

    [SP]

    이로써 환경 설정이 완성되었다.
    fastify 및 Typeform을 사용하여 RESTAPI 구축
    Ext Js4 CheckBox 학습 및 실례

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage