Vue.js(3. Vue3 Webpack Template)

min seung moon·2021년 4월 28일
1

Vue.js

목록 보기
3/8

1. vue3-webpack-template 생성

01. npx degit

  • 새창에서 진행!
  • npx degit으로 github에 있는 webpack을 갖고와 사용
    • git clone과의 차이점은 버전 내역이 없어서 새로운 프로젝트에서 진행하기 좋음
cd .\Desktop\
npx degit minseung-moon/webpack-template-basic vue3-webpack-template
cd vue3-webpack-template
code . -r

02. vue3 설치!

-1. src 폴더 생성 후 내부에 main.js, App.vue 생성

  • 기존에 js 폴더는 삭제!

-2. vue3 설치!

  • 최신 버전 설치를 위해 vue@next로 최신 버전 설치!
  • 개발 외에 브라우저에서 실제 동작하는 패키지이기 때문에 -D(개발의존성)이 아닌 일반 의존서응로 설치!
  • vue@next : vue.js의 문법을 해석하는 패키지!
npm i vue@next

-3. 부가적으로 vue3에 필요한 패키지 설치

  • vue 파일을 관리하는 패키지
  • 브라우저가 아닌 개발에서만 사용하기 때문에 개발 의존성으로 설치!
  • @vue/compiler-sfc : vue파일을 변환해서 브라우저에서 동작할 수 있게 변환해주는 패키지
npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

03. webpack.config.js에서 webpack 구성 수정!


// path : NodeJS에서 파일 및 디렉토리경로 작업을 위한 전역 모듈
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",

  // 결과물(번들)을 반환하는 설정
  output: {
    // 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS전역변수
    // path: path.resolve(__dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },

  // 모듈 처리 방식을 설정
  module: {
    rules: [
      {
        test : /\.vue$/,
        // use 속성에 loader가 하나면 배열로 안해도 된다!
        use : 'vue-loader'
      },
      {
        test: /\.s?css$/,
        // 순서 중요
        use: [
          'vue-style-loader',
          "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",
  },
};

04. vue3 기본 출력해보기!

-1. App.vue 작성!

<template>
    <h1>{{ message }}</h1>
</template>

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

-2. main.js 작성!

  • createApp에서 데이터를 index.html의 #app에 전달해줄 수 있다!
  • 이번에는 App.vue의 데이터를 전달
import { createApp } from "vue";
import App from "./App.vue";

// import Vue from "vue";
// CDN
// Vue.createApp(App).mount("#app");

// CLI
// import {createApp} from "vue";
createApp(App).mount("#app");

-3. index.html 수정!

  • div id app은 main.js에서 mount한 #app이다!
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>

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

</html>

05. webpack 구성 수정으로 vue 및 js 확장자 생략!

  • webpack.config.js
  • 수정 후 재시작!
// path : NodeJS에서 파일 및 디렉토리경로 작업을 위한 전역 모듈
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

// export
module.exports = {
  resolve: {
    extensions: [".js", ".vue"],
  },
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",

  // 결과물(번들)을 반환하는 설정
  output: {
    // 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS전역변수
    // path: path.resolve(__dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },

  // 모듈 처리 방식을 설정
  module: {
    rules: [
      {
        test: /\.vue$/,
        // use 속성에 loader가 하나면 배열로 안해도 된다!
        use: "vue-loader",
      },
      {
        test: /\.s?css$/,
        // 순서 중요
        use: [
          "vue-style-loader",
          "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",
  },
};

06. 정적파일 image 사용해보기!

-1. src에 components라는 폴더를 만들고 HelloWorld.vue 생성!

<template>
    <img src="~assets/관광고.jpg" alt="관광고">
</template>

-2. static에 있던 image를 src로 옮기고 assets로 변경!

-3. 정적파일을 사용하기 위한 패키지 설치 및 구성 파일 수정!

npm i -D file-loader
  • 패키지 설정 및 경로 별칭 사용!

// path : NodeJS에서 파일 및 디렉토리경로 작업을 위한 전역 모듈
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

// export
module.exports = {
  resolve: {
    extensions: [".js", ".vue"],
    // 경로 별칭
    alias: {
      "~": path.resolve(__dirname, "src"),
      assets: path.resolve(__dirname, "src/assets"),
    },
  },
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",

  // 결과물(번들)을 반환하는 설정
  output: {
    // 주석은 기본값!, `__dirname`은 현재 파일의 위치를 알려주는 NodeJS전역변수
    // path: path.resolve(__dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },

  // 모듈 처리 방식을 설정
  module: {
    rules: [
      {
        test: /\.vue$/,
        // use 속성에 loader가 하나면 배열로 안해도 된다!
        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)$/,
        use: "file-loader",
      },
    ],
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
    new VueLoaderPlugin(),
  ],

  // 개발 서버 옵션
  devServer: {
    host: "localhost",
  },
};

-4. App.vue에서 HelloWorld.vue 설정!

  • 현재 보이는 오류는 vue2의 오류로 vue3에서는 없는 오류
  • eslint 설치를 하면 없어짐!
<template>
    <h1>{{ message }}</h1>
    <HelloWorld />
</template>

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

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

profile
min seung moon
아직까지는 코린이!
이전 포스트

Vue.js(2. CLI, Vetur)

다음 포스트

Vue.js(4. Vue3 Webpack Template - ESLint 구성)

0개의 댓글