[Docker 위의 웹서버] 프로젝트 세팅 (4) - vue 세팅 및 연동

GITHUB

paullee714/Flask-Vue-ELK-Mongo-Docker

Vue 설정 및 초기화

yarn

나는 npm보다는 yarn을 선호한다. (npm으로 진행하면 뭔가 좀 더 설치하는 느낌....)

로컬에 yarn이 설치 되어 있는지 확인한 후에 없다면 설치 해준다.

확인 방법은 아래의 방법으로 진행하면 된다.

$ yarn --version

Vue - yarn global add

Vue CLI

Vue CLI 3.0 사용하기

yarn으로 vue를 설치 해 준다

$ yarn global add @vue/cli

Vue Project init

PROJECT ROOT
├── ELK
│   ├── elasticsearch
│   ├── kibana
│   └── logstash
├── README.md
├── docker-compose.yml
└── web
    ├── back
    └── front

• 위의 구조는 전체구조이다. 우리는 front에 vue 프로젝트를 초기화 해주려고 한다.
• web폴더 아래에 front를 만들어주고 접근한다

# PROJECT/web/front
$ vue create .   # 현재 위치에 프로젝트를 만들겠다는 뜻

위의 명령어를 실행하면 커맨드 창에 여러 질문들이 나온다.

Vue CLI v4.4.6
? Generate project in current directory? (Y/n)Y

Vue CLI v4.4.6
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.4.6 → 4.5.4     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

• Manually select features를 눌러준다

Vue CLI v4.4.6
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.4.6 → 4.5.4     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? 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

• Babel, Router, Vuex, Linter / Formatter 를 선택 해 준다

Vue CLI v4.4.6
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.4.6 → 4.5.4     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

• 계속해서 나오는 질문에 위와같이 선택 해준다

Vue Project 확인하기

web
├── back
│   ├── app.py
│   ├── back.Dockerfile
│   ├── back_lib
│   ├── requirements.txt
│   ├── route
│   ├── util
│   └── venv
└── front
    ├── README.md
    ├── babel.config.js
    ├── node_modules
    ├── .browserslistrc
    ├── .eslintrc.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    └── src
        ├── App.vue
        ├── assets
        ├── components
        ├── main.js
        ├── router
        ├── store
        └── views

• web 아래의 front에 위와같이 여러가지 패키지들이 설치 된 것이 보인다
• 프로젝트에서 사용할 lint와 prettier인 .eslintrc.js를 수정 해 주도록 한다

web/front/.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
    parserOptions: {
        parser: "babel-eslint"
    },
    rules: {
        // "no-console": "off",
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-useless-escape": 0,
        "prettier/prettier": [
            "error",
            {
                singleQuote: true,
                semi: true,
                useTabs: false,
                tabWidth: 4,
                trailingComma: "all",
                printWidth: 80,
                bracketSpacing: true,
                arrowParens: "avoid"
            }
        ]
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};

기본적으로 세팅이 되어있지만, 여러가지를 추가했다.

프로젝트가 실행 될때 에러가 날텐데, lint 설정이 맞지 않아서 그런 것이다.

singleQuote : true를 False로 바꿔주거나 전체 코드를 다시 저장 해 주면 된다.

실행 확인하기

vue설정을 완료 했으니 실행 해 주도록 한다

$ yarn run serve

이제 localhost:8080 에 들어가서 확인 해 보자!