Vue2 Vue-cli에서 Typescript를 사용하는 구성 소개
- 不言원래의
- 2018-06-29 15:52:432072검색
이 글은 주로 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을 문자열로 이해하도록 지시)
rrreee구성 후 ts는 이러한 모듈을 이해할 수 있습니다
vue-property-designator에서 필요한 모듈 소개
(일반적으로 Component, Vue, Watch, Prop만 사용합니다. 나머지 3개는 사용하지 않고 연구도 해본 적이 없습니다. 아는 사람이 설명해줄 수 있습니다.)
import { Component, Vue, Watch } from 'vue.-property- decorator'
다음은 이전에 작성한 sidbar 코드의 예입니다.
rrreee메타데이터는 이름, 사용된 구성 요소와 같은 @Component 구성으로 작성됩니다. , etc. 그런 다음 이전에 vue에서 사용된 각 인스턴스 속성 메소드를 사용하는 방법에 대해 이야기하겠습니다. data: 위의 SidebarMenu와 같이 가장 일반적으로 사용됩니다(여기에는 총 4개가 선언되어 있습니다). 값은 할당되어야 합니다. 그렇지 않은 경우 값은 null이고 정의되지 않을 수 없습니다. 그렇지 않으면 데이터가 응답하지 않습니다. 따라서 HoverTopElem 클래스의 속성에도 초기 값이 있어야 합니다. 그렇지 않으면 이러한 속성이 응답하지 않습니다. 계산됨: 여기에 tsconfig.jsonp가 "target": "es5"를 구성하지 않으며 오류가 발생합니다. 여기에 보고됩니다. Prop: vue- Property-Decorator에 Prop 모듈이 있습니다. 메타데이터에서 이 Prop을 선언한 다음, 클래스에서 이 변수를 선언할 수도 있습니다. 저는 개인적으로 첫 번째 것을 추천합니다. Watch: vue- property-decorator
vue 보기- 라우팅 후크를 위한 클래스 컴포넌트 문서이때 기본적으로 이전과 같이 Vue 컴포넌트를 작성할 수 있습니다.
관련 권장 사항:
🎜Vue 배경 이미지 패키징 후 잘못된 액세스 경로 문제를 해결하는 방법 🎜🎜🎜🎜🎜casperjs 및like.js 기반의 픽셀 비교 서비스 구현 🎜🎜🎜🎜🎜이후 처음으로 초기화 vue 프로젝트가 생성됩니다. 스타일러스를 이용한 설치 방법 소개🎜🎜🎜🎜🎜🎜🎜🎜🎜위 내용은 Vue2 Vue-cli에서 Typescript를 사용하는 구성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!