Vue2 Vue-cli에서 Typescript를 사용하는 구성 소개

이 글은 주로 Vue2 Vue-cli에서 Typescript를 사용하는 구성을 소개합니다. 참고할만한 가치가 있어서 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Vue는 3대 프론트엔드 프레임워크 중 하나입니다. 지금까지 github에서 44,873개의 별을 받았는데, 이는 조용히 주류가 되었음을 보여주기에 충분합니다. 다음 글에서는 Vue2 Vue-cli에서 Typescript를 사용하는 구성에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

머리말

회사 팀이 최근 vue 프레임워크에 푹 빠져 있고, 새로운 프로젝트에서 typescript를 연습하고 싶어서 vue+ts의 여정을 시작하게 되었어요... 이 글은 저와 같은 생각을 갖고 계시다면, 함정에 빠질 시간을 절약하세요. Vue2 Vue-cli에서 Typescript를 사용하는 데 필요한 구성에 대해서는 더 이상 설명하지 않겠습니다.

1. 초기 구성

먼저 공식 플러그인인 vue-class-composite, vue-property-designer를 설치하고 webpack을 구성합니다.
웹팩 구성은 다음과 같습니다.

항목 파일 수정

entry: {
 app: './src/main.ts'
}

해결 부분:

extensions: ['.js', '.vue', '.json', '.ts', '.tsx']

로더 구성

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

tsconfig.json 구성

{
 "include": [
 "src/**/*"
 ],
 "exclude": [
 "node_modules"
 ],
 "compilerOptions": {
 "allowSyntheticDefaultImports": true,
 "experimentalDecorators": true,
 "allowJs": true,
 "module": "es2015",
 "target": "es5",
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}

2. 실전 전투!

구성 설정은 첫 번째 단계일 뿐이며 프로젝트에서 실행하는 것이 핵심입니다.

vue 파일의 스크립트 태그에 lang='ts'를 추가하세요lang='ts'

因为ts-loader不像配过loader的webpack一样知道vue,html等文件是什么东西，你跑起来后会报模块无法解析的错误，所以还需要配置.d.ts声明文件

vue的如下配置

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

你也可以为其它的非js模块配置.d.ts文件如html（告诉ts-loader把html理解成字符串）

declare module "*.html" {
 let template: string;
 export default template;
}

配置好之后ts就能理解这些模块了

从vue-property-decorator引入需要用到的模块

（一般只用到Component, Vue, Watch, Prop这四个，其它3个没用到也没研究，知道的大佬可以解释下。）

import { Component, Vue, Watch } from 'vue-property-decorator'

vue의 다음 구성

class HoverTopElem {
 leaveTop: number = -200
 top: number = null
 height: number = null

 show(e) {
 this.top = e.target.getBoundingClientRect().top
 this.height = e.target.clientHeight
 }
 hidden() {
 this.top = this.leaveTop
 }
}

@Component({
 name: 'sidebar',
 template: template,
 components: {
 sidebarItem
 }
})
export default class Sidebar extends Vue {
 SidebarMenu: any = SidebarMenu
 hoverTopElem: HoverTopElem = new HoverTopElem()
 activeListItemName: string = null
 activeRouteItemRoute: string = null

 get _activeRouteItemRoute(): string {
 return this.$route.path
 }

 @Watch('_activeRouteItemRoute', { immediate: true })
 onRouteChanged(val: any) {
 this.activeRouteItemRoute = val
 }

 changeList(param) {
 this.activeListItemName = param
 }

 changeRoute(param) {
 this.activeRouteItemRoute = param
 }
}

.d.ts도 구성할 수 있습니다 html과 같은 기타 비-js 모듈용 파일(ts-loader에게 html을 문자열로 이해하도록 지시)

구성 후 ts는 이러한 모듈을 이해할 수 있습니다

vue-property-designator에서 필요한 모듈 소개

(일반적으로 Component, Vue, Watch, Prop만 사용합니다. 나머지 3개는 사용하지 않고 연구도 해본 적이 없습니다. 아는 사람이 설명해줄 수 있습니다.)

다음은 이전에 작성한 sidbar 코드의 예입니다.

메타데이터는 이름, 사용된 구성 요소와 같은 @Component 구성으로 작성됩니다. , etc. 그런 다음 이전에 vue에서 사용된 각 인스턴스 속성 메소드를 사용하는 방법에 대해 이야기하겠습니다. data: 위의 SidebarMenu와 같이 가장 일반적으로 사용됩니다(여기에는 총 4개가 선언되어 있습니다). 값은 할당되어야 합니다. 그렇지 않은 경우 값은 null이고 정의되지 않을 수 없습니다. 그렇지 않으면 데이터가 응답하지 않습니다. 따라서 HoverTopElem 클래스의 속성에도 초기 값이 있어야 합니다. 그렇지 않으면 이러한 속성이 응답하지 않습니다. 계산됨: 여기에 tsconfig.jsonp가 "target": "es5"를 구성하지 않으며 오류가 발생합니다. 여기에 보고됩니다. Prop: vue- Property-Decorator에 Prop 모듈이 있습니다. 메타데이터에서 이 Prop을 선언한 다음, 클래스에서 이 변수를 선언할 수도 있습니다. 저는 개인적으로 첫 번째 것을 추천합니다. Watch: vue- property-decorator

다양한 생명주기 후크: 직접 작성합니다.

vue 보기- 라우팅 후크를 위한 클래스 컴포넌트 문서이때 기본적으로 이전과 같이 Vue 컴포넌트를 작성할 수 있습니다.

관련 권장 사항:

위 내용은 Vue2 Vue-cli에서 Typescript를 사용하는 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!