1.概要

2. Vue CLI, Vetur

npm install -g @vue/cli

// vue 프로젝트 폴더 생성

vue create hello-world

3. Vue3 Webpack Template

npx degit toproot/webpack-template-basic vue3-webpack-template

// 최신버전(3)
npm i vue@next

// 패키지 설치
npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

// webpack.config.js에 다음내용 추가

module.exports = {
  resolve: {
    extensions: ['.js', '.vue']
  },

import App from './App'

npm i -D file-loader

// wevpack.config.js - module

{
    test: /\.(png|jpe?g|gif|webp)$/,
    use: 'file-loader'
}

// 경로 별칭
//  wevpack.config.js - resolve

alias: { // 경로 별칭
      '~': path.resolve(__dirname, 'src'),
      'assets' : path.resolve(__dirname, 'src/assets')
    }

4.Vue 3 Webpack Template-ESLint配置

npm i -D eslint eslint-plugin-vue babel-eslint

module.exports = {
  env: {
    browser: true,
    node: true
  },
  extends: [
    // 코드규칙
    // vue
    // 'plugin:vue/vue3-essential', // Lv 1
    'plugin:vue/vue3-strongly-recommended', // Lv 2
    // 'plugin:vue/vue3-recommended', // Lv3
    // js
    'eslint:recommended'
  ],
  parserOptions: {
    // 코드를 분석할 수 있는 분석기 지정
    parser: 'babel-eslint'
  },
  rules: {
    // 위의 규칙을 커스텀할 때 사용
    // vue/html-closing-bracket-newline
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],

    // vue/html-self-closing
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }]
  }
}