1. 개요

• Vue.js 3버전

  시작하기 | Vue.js

2. Vue CLI, Vetur

• CLI 전역변수로 설치

npm install -g @vue/cli

• creating a Project

Creating a Project | Vue CLI

// vue 프로젝트 폴더 생성

vue create hello-world

• [플러그인] vetur 설치 : vue - code highlighting

3. Vue3 Webpack Template

• 기존 프로젝트 가져오기 ( 버전 초기화 )

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

• vue3 설치

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

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

• import from에서 vue 확장자 생략방법

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

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

import App from './App'

• file-loader 설치

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. Vue3 Webpack Template - ESLint 구성

• eslint : node, browser의 코드를 작성하는 규칙 설정

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

User Guide | eslint-plugin-vue

vue/html-closing-bracket-newline | eslint-plugin-vue

List of available rules

완성 템플릿

ParkYoungWoong/vue3-webpack-template

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"
    }]
  }
}