[Vue.js 3.0] 환경 설정 및 프로젝트 생성 (1)

Vue.js의 공식 로고

1) Visual Studio Code 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

2) Node.js 설치

https://nodejs.org/ko/

Node.js

3) 프로젝트 생성

 

New Terminal 클릭 하면 Powershell 창이 생성 됩니다.

1) Vue  cli 설치

D:\831228 EEH\EEH\EX\VUE> npm install -g @vue/cli

D:\831228 EEH\EEH\EX\VUE> vue -V

2) 프로젝트 생성 (Default) -3번 항목으로 프로젝트 생성 

vue create [프로젝트명] ex) D:\831228 EEH\EEH\EX\VUE>vue create exui

Vue 3 선택

D:\831228 EEH\EEH\EX\VUE> cd exui

D:\831228 EEH\EEH\EX\VUE\exui> npm run serve

3) 프로젝트 생성 (Manually select features)

(1) Manually select features

(2) Babel,TypeScript(TypeScript 개발지원),Router,Vuex,Linter/Formatter(JavaScript codding convention)

(3) 3.x

(4) Y (기본값)

(5) TypeScript에 babel 설정 Yes

(6) history/hash mode 선택 Yes

history mode : 페이지 리로드시 페이지를 찾을수 없어 추가로 서버 설정 필요:404 error page 처리 (/)

hash mode : URL 해시를 사용하여 전ㅊ URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다

(7) ESLint + Prettier 선택

(8) 둘다 체크

(9) In dedicated config files

(10) 셋팅 정보를 저장해 다음에 사용(Yes)

4) 확장 프로그램 설치

 

ESLint

Prettier - Code formatter

Vetur

 

 

 

 

 

 

생성한 프로젝트 오픈

5) 폴더 구조 및 설명

node_modules : npm install시 module이 설치되는 폴더

public : 기본 정적 HTML 폴더

src : vue 실제 개발되는 폴더

src/assets : 이미지,파일,css,폰트 등이 모여 있는 폴더

src/comonents : vue 컴포넌트 관리 폴더

src/App.vue : 최상위 컴포넌트

src/Main.js : vue 인스턴스 생성(시작점)

.gitignore : git 업로드 제외 파일리스트

babel.config.js : 브라우저 호환(각 브라우저 마다 지닌 JavaScript 엔진의 차이로 발생하는 것인데 최신의 모던 브라우저에서는 최신 JavaScript 문법이 동작하지만 이를 지원하지 않는 브라우저에서는 앱이 제대로 동작하지 않는 문제를 해결)

package.json :프로젝트 패키지 관리 및 설치 목록

.eslintrc.js : eslint 설정

 

 

 

 

 

 

6) ESLint,Prettier 설정

.eslintrc.js 수정

rules 추가

'prettier/prettier': [

            'error',

            {

                singleQuote: true,

                semi: true,

                useTabs: true,

                tabWidth: 2,

                trailingComma: 'all',

                printWidth: 80,

                bracketSpacing: true,

                arrowParens: 'avoid',

            },

        ],

 

컴포넌트 생성시 멀티 단어로 생성 해야하는데 그렇지 못할때 ignores에 추가

'vue/multi-word-component-names': [

      'error',

      {

        ignores: [],

      },

    ],  

ESLint 설정 

[ctrl + , ] 나

Edit in settings.json 클릭 하여

추가

 

 

 "eslint.validate": [   "vue", "javascript", "javascriptreact", "typescript","typescriptreact"

  ], 

 

 

 

 

 

 

 

 

 

 

Prettier 설정

 

 

 

 

 

 

 

 

 

 

 

 

 

감사합니다.