[vuejs] vue-cli를 활용한 vuejs 프로젝트 생성

vue-cli란?

• 빠른 vuejs Appclication 개발을 위한 도구
• vuejs 프로젝트 내부 구조를 빠르게 구성할 수 있도록 도와줌

vue-cli 설치 (node.js 설치 가정)

• npm install -g @vue/cli
• npm install -g @vue/cli@{version}
• npm install -g @vue/cli@4.5.15

vue cli 설치 확인

• vue --version
  > @vue/cli 4.5.15

vue 프로젝트 생성

• vue create {프로젝트명}
• vue create pjh-frontend-util-vue

• 프로젝트 선택 옵션 선택
  

vue 프로젝트 생성 완료

vue 로컬 서버 기동

• npm run serve

• [error case] digital envelope routines::unsupported

  • 해결 방안 : NODE_OPTIONS 환경변수에 --openssl-legacy-provider 옵션 추가
  • 해결 상세

  // package.json
  "scripts": {
  "serve": "vue-cli-service serve",
  "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve"
  },

  • npm run dev

  

  • 근본적인 해결 방안 : Node.js와 OpenSSL을 최신 버전으로 upgrade

로컬 서버 실행 확인

참고

• .vue 파일 소스 highlighter 적용 : vscode> marketplace> vetur install