Vue 및 Typescript 빌드 프로젝트

이번에는 Vue 및 Typescript 구축 프로젝트를 가져왔습니다. Vue 및 Typescript 구축 프로젝트의 주의사항은 무엇인가요?

Typescript는 프런트엔드 분야에서 점차 인기를 얻고 있습니다. Vue 2.5.0에서는 유형 선언이 개선되어 TypeScript에 더욱 친숙해졌습니다.

그러나 프로젝트에서 TypeScript를 직접 사용하려면 여전히 다음을 작성해야 합니다. 프로젝트에 대한 일부 수정

PS: 개발에는 Visual Studio Code를 사용하는 것이 좋습니다

1. 종속성 설치

먼저 vue-cli를 사용하여 프로젝트를 생성합니다

vue init webpack demo

그런 다음 필요한 종속성을 설치하십시오: typescript, ts-loader, vue-class-comComponent

npm install typescript vue-class-component -D

npm install ts-loader@3.3.1 -D

위의 ts-loader를 설치할 때 버전 3.3.1이 지정되었습니다

이 블로그를 작성할 때 때문입니다(2018- 03-14) 최신 버전의 ts-loader가 설치되었습니다. 4.0.1의 경우 프로젝트를 시작하면오류가 발생합니다

요청 시 도입할 수 있는 여러 라이브러리도 있습니다:

tslint: ts 코드를 표준화하고 tsllint-loader와 함께 사용해야 합니다. tslint-config-standard를 추가하는 것이 가장 좋습니다.

vue-property- decorator: vue-class-comComponent의 확장입니다. Vue 기능(@Emit, @Prop 등)을 결합한 여러 데코레이터를 추가합니다.

vuex -class: vue-class-composite 기반 vuex에 대한 지원을 강화합니다.

2. Webpack 구성

그런 다음 ./build/webpack.base.conf.js 파일을 수정합니다.

resolve.extension에 '.ts'를 추가하면 됩니다. ts 파일을 가져올 때 작성합니다. .ts 접미사

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

module.rules에 웹팩의 ts 파일 구문 분석을 추가합니다

3. 기타 구성

프로젝트 루트 디렉터리에 tsconfig.json 파일을 만듭니다.

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

Complete tsconfig .json 구성 항목은 공식 문서를 참조하세요

./src 디렉터리에 vue-shim.d.ts 파일을 생성하고 ts가 .vue 파일을 인식하도록 합니다:

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4. 파일 변환

src 디렉터리의 .vue 파일을 변경합니다. 모든 js 파일의 접미사를 .ts

로 변경한 다음 webpack 구성 파일 ./build/webpack.base.conf의 항목을 변경합니다. js를 main.ts로

변환된 ts 파일은 .vue 파일을 인식하지 못하므로 .vue 파일을 도입할 때 .vue 접미사를 수동으로 추가해야 합니다

In all .vue 파일은