[Vue] Vue CLI(feat.NodeJS)

1. VUE CLI(Command Line Interface)

Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI다.

Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공한다.

Vue와 관련된 오픈소스들 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있다.

 

2. 설치

NodeJS

https://nodejs.org/ko/ 에서 LTS 버전을 다운로드한다.

NPM(Node Package Manager)

command에서 third-part 모듈을 설치하고 관리하는 툴이다.

모듈 검색은 https://www.npmjs.com/ 에서 할 수 있다.

npm init을 하면 package.json이 생성되는데, maven의 pom.xml과 역할이 비슷하다.

 

모듈 설치

1. 작업 폴더로 이동해서 cmd 창을 연다.

2. npm init 명령어로 새로운 패키지를 만든다.

3. package name, version, description, entry point, test command, git repository, keywords, author, license 모두 설정한 뒤 package.json을 확인한다. 아무것도 쓰지 않고 엔터를 누르면 (기본값)이 설정된다.

4. prompt-sync를 설치한다.

5. @vue/cli를 전역으로 설치한다. 

 

프로젝트 생성

1. 프로젝트를 생성한다. 이 때, 파일 경로에 특수문자가 있으면 안된다.

• vue create <project-name>을 하면 된다.
• 생성 중 중지는 ctrl+c를 이용한다.

2. 기본으로 설치할지, 플러그인을 추가할지 선택한다.

나는 Manually select features로 Router, Vuex 플러그인을 더 선택했다.

뷰는 2.x, 라우터를 history 모드로 설정했다.

linter / formatter는 ESLint+Prettier로 했다.

저장 시 lint 검사만 할지 자동으로 고치는 것이 가능한것은 수정까지 할 지 선택한다.

config파일을 하나로 관리할 지 따로따로 관리할지 선택한다.

마지막으로 같은 설정을 다음에도 사용하기 위해 별도의 환경설정을 만들것인지 선택하면 끝난다.

3. 프로젝트 생성이 완료되었다.

4. 프로젝트 생성 후 별도로 플러그인을 설치하려면 vue add plugin-name을 사용한다.

 

프로젝트 내에서 모듈 설치

1. 프로젝트폴더로 이동한 뒤, 해당 프로젝트에서 사용할 모듈을 설치한다. 나는 axios와 moment를 설치했다.

2. 만약 node_modules가 사라졌다면 npm install로 package.json에 있는 모듈을 재설치할 수 있다.

 

eslint / prettier

1. endOfLine 오류를 제거하기 위해서 package.json > eslintConfig > rules에 다음을 넣는다.

config를 따로 설정했다면 .eslintrc.js에 추가하면 된다.

 "rules": {
      "prettier/prettier": [
        "error",
      {
        singleQuote: false,
        semi: true,
        tabWidth: 2,
        trailingComma: "all",
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: "always",
        endOfLine: "auto",
        useTabs: false,
      },
      ]
    }

2. vs code settings에서 print width를 80으로 설정한다.

프로젝트 실행

1. command 창 또는 vs code 터미널에서 npm run serve를 입력한다.

2. http://localhost:8080/ 링크로 들어가서 프로젝트가 잘 생성됐는지 확인한다.

 

3. 프로젝트 구조

1. index.html 파일 하나만 실행된다.
2. views에는 router-link로 이동되는 큰 화면들, 
3. component에는 views의 화면들을 구성하는 작은 조각들을 넣는다.
4. router는 라우터 정보가 담긴 파일이 있다.
5. store는 vuex관련된 폴더다.
6. 가장 먼저 App.vue가 먼저 실행된다. 프로젝트 내에서 같이 쓰는 css 등은 이 파일의 style에 넣으면 좋다.
7. main.js는 뷰 인스턴스를 생성한 뒤 router, store를 설정하고 App.vue를 렌더링한다. 뷰 인스턴스가 마운트될 때 App.vue의 "#app"이 연결된다.
8. package.json는 각종 모듈의 설정이 들어있다.
9. jsconfig.json에서 "compilerOptions"의 "path" 설정을 이용해서 쉽게 절대경로를 사용할 수 있다. 아래 설정은 "@"로 시작하는 모든 주소의 실제 주소가 "src" 밑에 있다는 의미다.

"paths": {
  "@/*": [
    "src/*"
  ]
}