ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint)
      Vue/설정 2021. 6. 19. 20:17

       

      1. Vue package 설치

      • npm i vue@next
      • npm i vue 로 설치 시, Vue2 버전이 설치됨
      • 기본적은 Vue의 문법을 사용하는 용도

      2. .Vue 파일을 관리하기 위한 Package 설치

      • npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc
        • @vue/compiler-sfa는 vue파일을 브라우저에 동작할 수 있는 형태로 변환

      3. 기본 폴더 및 파일 생성

      • src 폴더 생성 및 src 폴더 안에 main.js 및 App.vue 파일 생성

      4. webpack.config.js 파일 생성 및 설정

      • entry 속성에 main.js 설정
      • module rules 속성에 .vue 확장자를 해석할 수 있도록 설정
      • module rules 속성에 vue style loader 추가 ( vue 파일 내부의 style 태그 )
      • resolve extensions에 .vue 추가 ( import 시, .vue 생략 가능 )
      • VueLoaderPlugin 추가
      // webpack.config.js
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

// resolve(a,b): a와 b의 경로를 합쳐준다.
// __dirname: webpack.config.js 파일이 있는 경로
module.exports = {
  entry: './src/main.js', // 파일을 읽어들이기 시작하는 진입점 설정
  output: {
    // 결과물(번들)을 반환하는 설정
    // path: path.resolve(__dirname, 'dist'), // nodejs에서 요구하는 절대경로로 지정
    // filename: 'main.js', // 빌드 파일명
    clean: true, // 재빌드 시, 필요없는 파일들 제거
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.s?css$/,
        use: [
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ],
  },

  resolve: {
    extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html',
    }),
    new CopyPlugin({
      patterns: [{ from: 'static' }],
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    host: 'localhost',
  },
};

      5. index.html, main.js, App.vue 파일 작성

      // index.html
<body>
  <div id="app"></div>
</body>
      // App.vue
<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!!!',
    };
  },
};
</script>
      // main.js
import { createApp } from 'vue';
import App from './App';

createApp(App).mount('#app');

      6. Components 생성 및 File-loader Package 설치

      • src 폴더 밑에 components 폴더 및 HelloWorld.vue 파일 생성
      • HelloWorld 파일에서 이미지 불러오기 위해 src 폴더 밑에 assets 폴더 및 이미지 파일 추가
      • 파일을 읽어서 브라우저에 출력하기 위해 file-loader Package 설치
        • npm i -D file-loader

      • webpack.config.js에 file-loader 추가 및 파일 관령 경로 별칭 설정
      // webpack.config.js
const path = require('path');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        use: 'file-loader',
      },
    ],
  },

  resolve: {
    extensions: ['.js','.vue',],
    // 경로 별칭
    alias: {
      '~': path.resolve(__dirname, 'src'),
      assets: path.resolve(__dirname, 'src/assets'),
    },
  },
};
      • HelloWorld.vue 컴포넌트로 이미지 설정 및 App.vue 에서 HelloWorld 컴포넌트 import
      // HelloWorld.vue
<template>
  <img src="~assets/logo.jpg" alt="logo" />
</template>
      // App.vue
<template>
  <h1>{{ message }}</h1>
  <HelloWorld />
</template>

<script>
import HelloWorld from '~/components/HelloWorld';

export default {
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: 'Hello Vue!!!',
    };
  },
};
</script>

      7. ESLint 설정

      • ESLint Package 설치
        • npm i -D eslint eslint-plugin-vue babel-eslint

      • .eslintrc.js 파일 생성
      module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: [
    // vue
    // 'plugin:vue/vue3-essential', // Lv1
    'plugin:vue/vue3-strongly-recommended', // Lv2
    // 'plugin:vue/vue3-recommended', // Lv3

    // js
    'eslint:recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'vue/html-closing-bracket-newline': [
      'error',
      {
        singleline: 'never',
        multiline: 'never',
      },
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: {
          max: 2,
          allowFirstLine: true,
        },
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
  },
};
      • eslint에 적용된 설정으로 자동 수정
        • ctrl + shift + p > settings 입력 > setting.json 파일 open
        • 아래 옵션 추가
        "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

       

      [참고자료]

      https://eslint.vuejs.org/rules/

       

      Available rules | eslint-plugin-vue

      Available rules Legend 🔧 Indicates that the rule is fixable, and using --fix option on the command line (opens new window) can automatically fix some of the reported problems. Base Rules (Enabling Correct ESLint Parsing) Enforce all the rules in this ca

      eslint.vuejs.org

      https://eslint.org/docs/rules/

       

      List of available rules

      no-unreachabledisallow unreachable code after `return`, `throw`, `continue`, and `break` statements

      eslint.org

       

      'Vue > 설정' 카테고리의 다른 글

      Vue CLI 로 프로젝트 설정  (0) 2021.06.19

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바