LWW

CS / FrontEnd / Programming / DataScience

3 분 소요

1. Vue.js란?

  • 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
  • 점진적 채택할 수 있도록 설계
  • 다른 라이브러리나 기존 프로젝트와의 통합이 쉬움
  • 현대적 도구 및 지원 라이브러리와 함께 사용하면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있음
  • 반응성이 뛰어남


2. Vue.js 시작 방법

- CDN

  • 프로토 타이핑 또는 학습 목적으로 사용할 시 CDN으로 간편하게 사용
<!-- html -->

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <h1></h1>
</div>



// js

Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app')


- CLI

  • 단일 페이지 App을 빠르게 구축할 수 있는 공식 CLI 제공
# terminal

$ npm i -g @vue/cli
$ vue create vue3-test
버전 선택
$ cd vue3-test
$ code .


  • 코드 가독성을 위해 Vetur 확장 프로그램 설치

vue1

// App.vue 구성

// HTML
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>  // 제거하고 시작
</template>

// JavaScript
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

// CSS
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


- Webpack

# terminal

$ npx degit LeeWonWoo1/webpack-template-basic vue3-webpack-template
$ cd vue3-webpack-template
$ code . -r
$ npm i vue@next
$ npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc



// 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 = {
  resolve: {
    extensions: ['.js', '.vue']  // js, vue 확장자를 명시하지 않아도 에러 발생 막음
  },
  entry: './src/main.js',
  output: {
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,  // .vue로 끝나는 파일
        use: 'vue-loader'  // Webpack에서 vue 파일을 읽어내는 용도
      },
      {
        test: /\.s?css$/,
        use: [
          // 순서 중요!
          'vue-style-loader',  // Vue 파일 내의 style 태그를 해석해서 동작시키는 용도
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    }),
    new VueLoaderPlugin()  // 생성자 함수로 호출
  ],
  devServer: {
    host: 'localhost'
  }
}


  • 루트 경로에 src 폴더를 생성하고
  • src 폴더 안에 main.js 파일 만들기
  • src 폴더 안에 App.vue 파일 만들기
  • 기존 js 폴더는 삭제
// App.vue

<template>
  <h1></h1>
</template>

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



// src/main.js

import { createApp } from 'vue'
import App from './App'

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



<!-- index.html -->

<body>
  <div id="app"></div>
</body>



# terminal

$ npm run dev


vue2


  • 기존 static 폴더 내부의 images 폴더를 src 폴더 내부로 이동
  • images 폴더의 이름을 assets로 변경
  • src 폴더 내부에 components 폴더 생성
  • components 폴더 내부에 HelloWorld.vue 파일 생성


vue3


# terminal

$ npm i -D 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 = {
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {  // 경로 별칭
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }  
  },
  entry: './src/main.js',
  output: {
    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'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,  // png, jpg, jpeg, git, webp로 끝나는 파일
        use: 'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    host: 'localhost'
  }
}



// src/components/HelloWorld.vue

<template>
  <img src="~assets/bear.jpg" alt="Bear" />
</template>



// src/App.vue

<template>
  <h1></h1>
  <HelloWorld />
</template>

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

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


vue4


3. ESLint 구성

# terminal

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


  • 루트 경로에 .eslintrc.js 파일 생성
// .eslintrc.js

module.exports = {
  env: {  // browser, node 환경에서 동작하는 전역 개념들을 모두 코드 검사
    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: {  // 구문 분석할 패키지 설정(Babel, ES6^ => ES5)
    parser: 'babel-eslint'
  },
  rules: {  // 추가적인 코드 규칙 설정
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }],
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }]
  }
}



// setting.json

// 저장시 eslint 형식으로 자동 코드 정렬
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}



// src/components/HelloWorld.vue

<template>
  <img
    src="~assets/bear.jpg"
    alt="Bear" />
  <div></div>
</template>

댓글남기기

참고