20210603 Vue01 : 맛보기, CDN 방식, CLI, 프로젝트 시작, vetur, webpack-template 만들기

Vue 01

• Vue js 3버전
• Vue : 프론트 엔드를 위한 javascript 프레임워크

CDN 방식 사용해 보기

• <script src="https://unpkg.com/vue@next"></script> 을 html에 CDN 넣어 연결
• Vue 전역 객체 사용가능해 짐

See the Pen ExWQqdN by RaccoonCode96 (@raccooncode96) on CodePen.

CLI 지원

• 단일페이지 앱을 빠르게 구축하는 CLI 명령어를 제공함
• npm i -g @vue/cli 명령어를 통해서 Vue CLI 패키지를 전역속성(터미널에서 언제든지 실행 할 수 있게)으로 설치 가능함
• Vue CLI

프로젝트 시작

• vue create 앱이름 -> vue 3 버전 선택 -> 앱 구성이 만들어 짐
• package json
  • scripts (vue CLI에서 제공 함)
    • serve : 개발서버 / build : 제품화 / lint : 규칙확인
  • eslintConfig : 규칙 세팅

Vetur

• src 부분에 App.vue 파일의 경우 하이라이팅을 시켜줘야 보기 편하기 때문에 확장 프로그램인 Vetur 가 필요함

Vue 파일

• template, script, style로 나뉘어져 있음
• template 는 표현되는 부분, script는 컴포넌트를 불러오는 것, style은 CSS 지정

Vue3 Webpack Template

• 기존 webpack template를 github로 부터 가져오기 (npx degit 명령어 사용)
• src 폴더 생성 - src안에 App.vue 파일, main.js 파일 생성

• 3버전 vue.js 설치 (개발 의존성이 아닌 일반 의존성으로 설치) -> npm i vue@next

  • @next 키워드 : 3버전을 위한 코드 임
  • npm i vue@next : vue 문법 해석 용도
  • npm i -D vue-loader@next
  • npm i -D vue-style-loader : vue 파일의 style 태그 해석 및 동작시키는 패키지
  • npm i -D @vue/complier-sfc : 실제로 vue 파일이 동작할 수 있게 변환시키는 패키지
• webpack.config
  • entry : main.js 경로 수정
  • module에 rules에 vue파일 해석할 수 있게 규칙 설정
  • css 파일 해석하는 부분에 vue-style-laoder를 최상위에 놓이게 수정
  • VueLoaderPlugin 가져와서 plugins 속성에 연결

const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
// VueLoaderPlugin 가져오기
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  // entry 파일 경로 수정
  entry: "./src/main.js",
  output: {
    clean: true,
  },

  module: {
    rules: [
      // vue 파일 해석 연결
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      // vue 파일의 CSS 해석 연결
      {
        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" }],
    }),
    // VueLoaderPlugin 연결
    new VueLoaderPlugin(),
  ],

  devServer: {
    host: "localhost",
  },
};

App.vue 파일 작성

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

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

main.js 파일 작성

// vue 모듈에서 가져오기
import { createApp } from "vue";
// App.vue 파일 가져오기
import App from "./App.vue";

// App.vue 파일을 기준으로 앱을 만들고, html 의 app id 요소에서 부착함
createApp(App).mount("#app");

vue 파일 확장자 없이 인식 세팅

• extensions 에 js와 vue 확장자를 넣어서 해당 확장자를 필수 적으로 요구하지 않게 함
• main.js에서 vue 확장자 생략 가능

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

img 파일 component 인식

• components, assets를 src에 넣고 assets에는 이미지 파일들을 보관함
• assets에서 img를 가져올때 경로를 쉽게 찾기 위해서 경로 별칭화를 시킬 필요가 있고
• img 파일 인식을 위해서 file-loader 패키지 필요
  • npm i -D file-loader

<template>
  <img src="~assets/logo.png" alt="" />
</template>

• 이미지 관련 확장자 파일이 읽힐 수 있게 file-loader를 연결

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

특정 경로 별칭 만들기

• 경로 설정시 편하게 사용하기 위해서 src의 경로 까지를 ~로 표기할 수 있음
• assets 키워드는 assets의 경로 까지를 표기함

// webpack.config.js
module.exports = {
  resolve: {
    extensions: [".js", ".vue"],
    // 경로 별칭 만들기
    alias: {
      "~": path.resolve(__dirname, "src"),
      assets: path.resolve(__dirname, "src/assets"),
    },
  },
};

컴포넌트 사용하기

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

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