Vue CLI 를 통한 Vue 프로젝트 생성

상당히 오랫동안 Webpack 을 통해 만들어진 프로젝트를 깎고 깎아 사용하다가

신규 프로젝트를 생성할 일이 생겨 Vue CLI 를 통해 만들어보기로 한다.

 

일단 Vue CLI 를 실치해야 한다.

NPM 과 Yarn 을 프로젝트마다 혼용해서 사용하고 있지만 여기는 Yarn 을 사용.

> yarn -g add @vue/cli

설치가 잘 끝났는지 확인하기 위해 버전 확인을 한다.

> vue --version
'vue' 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

yarn 에 전역으로 설치할 일이 없다 보니 환경 변수가 안 들아가 있나 보다.

> yarn global bin
C:\Users\...\AppData\Local\Yarn\bin

저 경로를 윈도우 환경 변수에 추가하고 재부팅.

> vue --version
@vue/cli 5.0.6

잘 설치되었다.

> vue create test-project

적당한 이름으로 프로젝트를 생성한다.

? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features

이렇게 나오는데 기본 설치 말고 Manual 설치를 진행하는게 나중에 추가 설치를 안 해도 돼서 편하다.

Manually select features 선택.

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

이후 나오는 선택창에서 필요한 모듈을 선택한다.

나는 기본적인 Babel, TypeScript, Router, Vuex, CSS Pre-processors, Linter / Formatter 선택했다.

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

Vue 버전을 선택하라고 한다.

3.x 선택.

? Use class-style component syntax? (y/N)

클래스 스타일 컴포넌트 문법을 사용 여부.

y 선택.

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

타입스크립트에 바벨을 같이 사용할지 여부.

n 선택.

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

라우터에서 히스토리 모드를 사용할지 체크.

해시 타입을 사용하기 위해 n 선택.

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

Sass/SCSS 선택.

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

Linter 와 Formatter 조합을 골라야 한다.

Prettier 가 인기가 많다.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

Lint on save 만 선택.

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

각각 설정 파일을 package.json 에 통합할지 각각 파일로 저장할지 선택한다.

package.json 파일에 모여 있으면 나중에 수정이 골 아프니까 따로 저장한다.

? Save this as a preset for future projects? (y/N)

현재 세팅을 프리셋으로 저장할지 여부.

그런 거 싫으므로 n.

Vue CLI v5.0.6
✨  Creating project in ...\test-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.18
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 28.25s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.18
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 24.62s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project test-project.
👉  Get started with the following commands:

 $ cd test-project
 $ yarn serve

신나게 알아서 설치 해준다.

 

생성된 프로젝트 폴더에 들어가 보면 vue.config.js 파일이 없다.

세부 설정을 하려면 vue.config.js 파일을 만들어야 한다.

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
});

node_modules 에 있는 파일이 트랜스파일 되지 않은 raw 소스일 경우가 있으니 transpileDependencies 를 켜주자.

이것을 기본으로 추가 설정을 해주면 된다.

const { defineConfig } = require("@vue/cli-service");

const IS_LIVE = process.env.NODE_ENV === "production";
const MIN_EXT = IS_LIVE ? ".min" : "";

module.exports = defineConfig({
  transpileDependencies: true,
  productionSourceMap: false,
  css: {
    extract: {
      filename: `css/[name]${MIN_EXT}.css`,
      chunkFilename: `css/chunk/[name]${MIN_EXT}.css`,
    },
  },
  chainWebpack: (config) => {
    config.output
      .filename(`js/[name]${MIN_EXT}.js`)
      .chunkFilename(`js/chunk/[name]${MIN_EXT}.js`);
    config.when(!IS_LIVE, (config) => {
      config.devtool("source-map");
    });
    config.optimization.merge({
      splitChunks: {
        cacheGroups: {
          defaultVendors: {
            name: "chunk/vendors",
          },
          common: {
            name: "chunk/common",
          },
        },
      },
    });
  },
});

라이브 버전에서는 css/js 파일 확장자에 .min 을 추가하는 코드를 넣었고,

map 파일이 라이브 버전에서 생성되지 않도록 productionSourceMap 과 devtool 옵션을 수정했다.

추가로 chunk 파일 위치를 js/chunk 폴더로 몰아 넣었다.

 

https://cli.vuejs.org/config/

Configuration Reference | Vue CLI

 

Vue CLI 설정에서 조금 고생했는데, 매뉴얼을 잘 읽어보면 대부분 답이 있다.

이 매뉴얼에 없는 설정은 webpack 설정으로 처리하면 된다.

 

https://github.com/neutrinojs/webpack-chain

GitHub - neutrinojs/webpack-chain: A chaining API to generate and simplify the modification of Webpack configurations.

기존 webpack 설정과 동일한 configureWebpack 을 이용해도 되는데,

chainWebpack 을 이용한 설정을 사용하려다 보니 좀 더 헤맨 거 같다.

이것도 매뉴얼이 상당히 잘 적혀있다.

 

> yarn serve

마지막으로 serve 명령으로 dev 서버를 돌려보면

 

localhost:8080 에서 웰컴 페이지가 잘 나오는 걸 확인할 수 있다.

 

이제 프로젝트를 본격적으로 시작하면 된다.