Typescript를 사용하여 Vue 3 구성 요소 구축

Vue 3의 알파 버전이 나온 지 꽤 됐어요!
내가 이 글을 썼을 때, 알파8 버전이 방금 발표되었다.
Vue의 새 버전은 많은 향상과 개선을 가져올 것이지만 새 버전에서 가장 중요한 변화는 다음과 같습니다.

합성 API: React 연결 계발을 받아 논의된 특성입니다.

포털: 현재 구성 요소 이외의 일부 내용을 표시합니다.

세션: 여러 루트 노드를 허용합니다.

v-model-API가 업데이트되었습니다. 현재 여러 모델을 수용할 수 있습니다.

궁금증: 특수한 구성 요소로 조건이 충족되기 전에 귀사의 구성 요소가 아니라 귀사의 구성 요소를 보여 줍니다. (주로 사용자 체험에 사용됩니다.)

TypeScript: Vue는 이제 전체 TypeScript 지원을 제공합니다.

Vue 3은 여전히 적극적으로 개발 중이기 때문에, 일부 구성 요소는 버그나 일부 API가 변경될 수 있지만, 새로운 기능을 사용하기 위한 간단한 응용 프로그램을 작성할 수 있습니다.
본고에서 TypeScript를 매우 좋아하기 때문에 TypeScript를 사용하여 Vue 3을 사용하여 새 응용 프로그램을 만드는 데 따르는 절차를 소개합니다.
하지만talk는 매우 싸다. 우리는 새로운 응용 프로그램을 설치하기 시작한다🙂

항목 설정

첫 번째는 다음 줄의 명령을 사용하여 새 응용 프로그램을 초기화하는 것입니다.

yarn init

다음 항목에 필요한 종속성을 추가합니다.

yarn add [email protected]
yarn add --dev yarn [email protected] webpack-cli webpack webpack-dev-server typescript ts-loader @vue/[email protected]

이제 간단한 웹 설정을 정의하여 파일 webpack.config.js 을 만들고 다음 코드를 추가해야 합니다.

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
  entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true
  }
})

지금까지 설정은 좋았지만 TypeScript를 컴파일할 수 없었기 때문에 다음과 같은 규칙을 포함하는 파일을 추가해야 합니다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": ".",
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue",
  ],
}

Typescript 및 Webpack을 구성한 후 바로 가기를 추가하여 응용 프로그램을 시작하고 tsconfig.json 파일에 새 스크립트를 추가해야 합니다.

{

  //...
  // Dependencies
  //...

  "scripts": {
    "dev": "webpack-dev-server"
  }
}

참고 package.json 파일을 가져오는 동안 오류가 발생하지 않도록 *.vue 폴더에 다음 shims-vue.d.ts 파일을 추가해야 합니다.

declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

지금까지 구축된 인프라가 제대로 작동하는지 테스트하려면 다음을 수행해야 합니다.

프로젝트의 루트 디렉터리에 간단한 ./src

<!-- index.html -->
<h1>Hello Vue 3!</h1>
<script src="/dist/main.js"></script>

폴더 하나index.html

프로젝트에 제출/src 파일은 다음과 같습니다.

// src/main.ts

console.log('Hello world from Typescript!');

웹 서버 실행main.ts 사용

만약 모든 것이 정상적이고 yarn dev에 연결된다면, 우리가 방금 만든 페이지를 볼 수 있을 것이다.

결론적으로 이 단계가 끝날 때 다음과 같은 구조를 갖추어야 합니다.

├── index.html
├── package.json
├── tsconfig.json
├── webpack.config.js
├── src
│    ├── shims-vue.d.ts
│    └── main.ts

구성 요소 만들기

이제 응용 프로그램을 구축하는 데 필요한 환경이 준비되었습니다. 첫 번째 Vue 3 구성 요소를 만들 수 있습니다.
먼저 http://localhost:8080 폴더에 App.vue 라는 새 파일을 다음과 같이 추가합니다.

<template>
  <h2>This is a Vue 3 component!</h2>
  <button @click="increase">Clicked {{ count }} times.</button>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
  setup() {
    const count = ref(0)
    const increase = () => {
      count.value++
    }

    return {
      count,
      increase,
    }
  }
});
</script>

보시다시피 Vue 2에서 새로운 Vue 구성 요소를 만드는 것보다 Typescript 클래스를 만들고 src 확장 Vue를 사용할 필요가 있습니다. 현재 Vue 3에서는 class MyClass extends Vue {} 함수를 제공합니다.defineComponent() 함수에서props를 첫 번째 매개 변수로 하는 defineComponent() 함수를 볼 수 있습니다.이런 상황에서 응용 프로그램 구성 요소는 최고급 구성 요소가 될 것이기 때문에 어떤 도구도 전달하지 않을 것이다. (그래서 나는 전달 도구를 소홀히 했다.)
또한 코드에서 볼 수 있듯이 setup 방법이 되돌아오는 모든 내용은 템플릿에서 접근할 수 있습니다.
Vue 구성 요소가 생성되었으므로 다음과 같이 파일을 가져오기만 하면 됩니다.

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

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

또한 이 경우 Vue의 이전 버전에 비해 setup() 를 사용하여 새 응용 프로그램을 초기화할 필요가 없지만 Vue 3 을 사용하면 함수main.ts 및 const app = new Vue (....).$Mount('# app') 방법을 사용하여 응용 프로그램을 DOM 선택기에 연결할 수 있습니다.
마지막으로 마지막 단계는 Vue에 지정된 선택기를 포함하여 파일createApp()을 편집하는 것입니다.

<h1>Hello Vue 3!</h1>

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

<script src="/dist/main.js"></script>

응용 프로그램을 다시 시작하려면 mount() 을 사용하여 방금 생성한 새 Vue 구성 요소를 사용할 수 있습니다.

요점을 요약하여 다시 말하다.

본고에서 Vue 3, 합성 API와 Typescript를 사용하여 매우 간단한 구성 요소를 만드는 방법을 보여 드리겠습니다.분명히, 나는 빙산의 한 귀퉁이만 건드렸을 뿐, Vue 3에서 1000개의 다른 기능을 시도해야 하지만, 이 간단한 구성 요소가 있으면 새로운'기능성'방법을 감상할 수 있고, 그것으로 다음 Vue 버전에서 구성 요소를 정의할 수 있다.
PS: 모든 코드는 GitHub 에서 사용할 수 있습니다.
언제든지 연락 주세요!Blog (in italian) || || GitHub ||