먼저 @vue/cli 모듈을 글로벌로 인스톨한다.
|
1 |
npm install -g @vue/cli |
프로젝트를 생성하는 방법은 두가지가 있다. CLI라는 의미가 Command Line Interface로 커맨드로 생성하는 첫번째 방법과 Graphic 적인 UI로 생성하는 두번째 방법이 있는데, 결과적으로 생성되는 방법은 동일하다.
여기서는첫번째 CLI로 생성한다.
적당한 workspace 폴더를 만들고 프로젝트를 생성한다. 여기서는 C폴더에 eastflag 이라는 폴더를 만들고, shopmall 이라는 이름으로 프로젝트를 생성하였다.
|
1 |
c:\eastflag> vue create shopmall |
이제 여러가지 옵션들을 물어볼것이다. 아래/위 화살표로 움직이고 스페이스를 눌러서 선택후 엔터를 눌러서 다음으로 넘어간다.
|
1 2 3 |
? Please pick a preset: default (babel, eslint) > Manually select features |
맨 처음에 default를 선택하면 모든것이 default로 선택되고 바로 설치가 진행될것인데, 진행과정을 알아보기 위해서 Manually select 를 선택하고 결과를 확인해보겠다.
기본으로 선택된 Babel, Linter 이외에 Router, Vuex , CSS Pre-processors 3개를 스페이스를 눌러서 선택하고 엔터를 누른다.
|
1 2 3 4 5 6 7 8 9 10 11 |
? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex >(*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing |
history mode는 url을 만들때 # 같은 해쉬태그 대신에 사람이 읽기 쉬운 / 같은 걸 사용하는 모드이다. 만일 관리자 사이트를 만들면 필요가 없겠지만 쇼핑몰같은 프런트 사용자가 접근하는 페이지라면 history mode와 SEO 같은 것들이 중요해진다. Y를 누른다.
|
1 2 3 |
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) |
CSS 전처리기로 SCSS 를 선택한다.
|
1 2 3 4 5 |
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) > Sass/SCSS (with node-sass) Less Stylus |
ESLint 와 Prettier를 선택한다.
|
1 2 3 4 5 |
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config > ESLint + Prettier |
저장시에 Lint를 선택한다.
|
1 2 3 |
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit |
별도의 환경화일을 만들도록 선택한다.
|
1 2 3 |
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json |
현재 선택한 옵션을 다음번 프로젝트 생성시에 불러올것인가를 물어보는 화면이다. N을 누른다.
|
1 |
? Save this as a preset for future projects? (y/N) N |
그러면 이제 프로젝트가 생성이 되고 shopmall 폴더가 생성되었을 것이다. 해당 폴더로 이동해서 실행해본다.
|
1 2 |
C:\eastflag>cd shopmall C:\eastflag\shopmall>npm run serve |
http://localhost:8081 서버가 실행되고 브라우저가 실행될것이다. 이것은 앞의 webpack tutorial을 읽어봤다면 webpack-dev-server의 HMR 모드라는것을 알 것이다.
개발이 다 끝났다면 npm num build를 실행할것이고, dist 폴더에 생성된 화일들을 웹서버에 옮기면 된다. 이런 부분들은 webpack 튜토리얼에서 이미 다루었으니 잘 모르겠다면 fullstack에 있는 npm과 webpack 부분을 다시 보고 오자.