사전 준비 사항

Node.js가 설치되어 있고 환경 변수 설정이 완료되어야 합니다. Node 10 버전을 권장합니다. https://nodejs.org/en/download/

참고 자료: 이전 게시물 참조

Debian에 Node.js 설치

Yarn 및 npm 레지스트리 설정

시작하기

프로젝트 초기화

먼저 webapp이라는 디렉토리를 생성하고 yarn 명령어를 사용하여 초기화합니다.

yarn init

전체 명령어 실행 예시

  main git:(j2v8-version) ✗ mkdir webapp
➜  main git:(j2v8-version) ✗ cd webapp
➜  webapp git:(j2v8-version) ✗ pwd
/mnt/c/Users/Terwer/IdeaProjects/jvue/src/main/webapp
➜  webapp git:(j2v8-version) ✗ yarn init
yarn init v1.13.0
question name (webapp): jvue
question version (1.0.0):
question description: Next light-weight,responsive project With Vue,webpack,Spring Boot and eclipse j2v8 Script engine for server-side-rendering
question entry point (index.js): server.js
question repository url:
question author: Terwer
question license (MIT):
question private:
success Saved package.json
Done in 317.09s.
➜  webapp git:(j2v8-version) ✗

기본 라이브러리 초기화

  webapp git:(j2v8-version) ✗ yarn
yarn install v1.13.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.

프로젝트 의존성 설치

yarn add vue vue-router

Webpack 번들링 도구 설치

yarn add -D webpack webpack-cli

프로젝트 구조

모든 소스 코드는 src 하위 폴더에 위치합니다.

app.js : 애플리케이션 진입점

import Vue from "vue";
import Application from "./Application.vue";
new Vue({
  el: "#app",
  render: createElement => createElement(Application)
});

Application.vue: 최상위 컴포넌트

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

pages: 페이지 컴포넌트, 각 파일은 하나의 라우트에 대응

components: 하위 컴포넌트들

router: 라우팅 설정

store: Vuex 상태 관리 (추후 추가)

config: 프로젝트 설정 파일

ESLint를 통한 코드 스타일 정리

yarn add -D eslint babel-eslint eslint-config-google eslint-loader eslint-plugin-html eslint-plugin-vue @vue/eslint-config-prettier

.eslintrc.js 설정 파일

const configuration = require("./config");

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "google",
    "eslint:recommended",
    "plugin:vue/essential",
    "@vue/prettier"
  ],
  plugins: ["html"],
  settings: {
    "import/resolver": {
      webpack: {
        config: "build/webpack.base.conf.js"
      }
    }
  },
  rules: {
    "no-console": "off",
    "no-debugger": configuration.isProduction ? 2 : 0,
    "no-unused-vars": [
      2,
      {
        vars: "local",
        args: "none"
      }
    ],
    semi: ["error", "always"],
    "comma-dangle": ["error", "never"],
    "object-curly-spacing": ["error", "always"],
    "max-len": [
      "error",
      {
        code: 100,
        ignoreComments: true,
        ignoreTrailingComments: true,
        ignoreUrls: true,
        ignoreStrings: true
      }
    ],
    eqeqeq: ["error", "smart"],
    quotes: ["error", "double"],
    "require-jsdoc": 1,
    "new-cap": ["error", { capIsNew: false }]
  },
  parserOptions: {
    sourceType: "module",
    parser: "babel-eslint"
  }
};

package.json에 lint 명령어 추가

"lint": "eslint --ext .js,.vue,.html --ignore-path .gitignore --ignore-pattern !.eslintrc.js --ignore-pattern !.babelrc.js . --fix --color",

Webpack 프로젝트 번들링 설정

vue-loader 설치

yarn add -D vue-loader vue-template-compiler vue-style-loader css-loader

서버 사이드 렌더링이 아닌 일반 모드로 먼저 구성

webpack-dev-server와 html-webpack-plugin 설치

yarn add -D webpack-dev-server html-webpack-plugin

webpack.nossr.config.js 설정 파일

const { VueLoaderPlugin } = require("vue-loader");
const HtmlPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  node: {
    fs: "empty",
    module: "empty"
  },
  entry: "./src/app.js",
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: "./public/index.ejs",
      title: "Next Vue SSR Project for Java j2v8 Script engine",
      favicon: "./public/favicon.ico",
      inject: true
    })
  ],
  devServer: {
    host: "0.0.0.0",
    port: 8888
  }
};

package.json에 개발 서버 명령어 추가

"nossr": "webpack-dev-server --config build/webpack.nossr.config.js --progress"

결과 확인

yarn nossr 명령어를 실행하여 결과를 확인합니다.