집 >웹 프론트엔드 >JS 튜토리얼 >Vue 및 TypeScript 통합 구성 튜토리얼

Vue 및 TypeScript 통합 구성 튜토리얼

小云云원래의: 2018-01-15 13:48:591375검색

이 글은 주로 vue와 TypeScript의 통합 구성에 대한 가장 간단한 튜토리얼(권장)을 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

머리말

Vue의 공식 문서에는 TypeScript와의 통합을 위한 구체적인 단계가 나와 있지 않습니다. 인터넷의 다른 튜토리얼에는 문제가 있거나 vue-cli로 만든 프로젝트와 달라서 시작하기가 어렵습니다.

아래에서는 vue-cli로 생성된 프로젝트를 TypeScript와 통합하는 가장 간단한 구성을 설명하겠습니다.

프로젝트 초기화

먼저 vue-cli로 webpack 프로젝트를 생성합니다. 여기서는 시연의 편의를 위해 Router와 eslint를 열지 않고 각자의 상황에 맞게 열면 됩니다.

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

TypeScript 관련 종속성 및 프로젝트의 기타 종속성을 설치하려면 npm 또는 cnpm을 사용하세요. 파일 모듈>규칙 다음 규칙을 추가하세요

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

src 디렉터리에 새 파일 vue-shims.d.ts를 만들어 단일 파일에서 ts 코드를 식별합니다 vue

{
 test: /\.tsx?$/,
 loader: &#39;ts-loader&#39;,
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

TypeScript 구성 파일 만들기 프로젝트 루트 디렉터리 .json

declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}

의 tsconfig src 아래 main.js의 이름을 main.ts

webpack.base.conf로 수정합니다. js

아래의 entry>app은 './src/main.ts'

src 아래의 App.vue 파일을 수정하고,
아래에서 완료되는지 테스트할 수 있습니다.

main.js为main.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

test

통합이 성공했습니다. src/comComponents/Hello.vue 파일을 편집하고

<script lang="ts">

프로젝트를 실행하세요

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions

테스트가 성공했습니다. 이제 완료되었습니다. TypeScipt 프로젝트

Advanced

구성 공식 권장 vue-class-comComponent, https://cn.vuejs.org/v2/guide/typescript.html

개발 종속성 설치

# npm run dev

ts 구성 파일을 수정하고 다음 두 가지 구성을 추가합니다

# npm install --save-dev vue-class-component

Hello 컴포넌트를 다시 작성합니다

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

vue-class-comComponent를 사용한 후 초기 데이터를 추가하지 않고도 인스턴스의 속성으로 직접 선언할 수 있습니다. data() {return{}}에 있습니다. 공식 인스턴스와 같이 직접 인스턴스로 선언된 메소드를 사용할 수도 있습니다. 자세한 사용 방법은 공식 문서

https://github.com/를 참조하세요. vuejs/vue-class-comComponent#vue-class-comComponent

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }

Vue 및 TypeScript 통합 구성 튜토리얼

관련 기사