在Vue2，Vue-cli中使用Typescript需要的配置

dance 發(fā)布于2019-08-20 18:14 / 1677人閱讀

摘要：這里拿之前寫的的代碼當個栗子元數(shù)據(jù)寫在配置里，像名字，用到的組件啥的，然后說下之前里用到的各個實例屬性方法在這里怎么用這個是最常用的，像上面的這里一共聲明了個，注意這里聲明的變量一定要賦一個值，沒有就不能是，不然這個數(shù)據(jù)就不是響應的。

公司的團隊最近熱衷于vue框架，新項目想著練練typescript，于是開始了vue+ts的踩坑之路...
本文意在為和我有一樣想法的伙伴們省去踩坑的時間

1.初步配置

首先安裝官方插件vue-class-component，vue-property-decorator，配置webpack。
webpack配置如下：
修改入口文件

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

resolve部分：

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

配置loader

{
    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.實戰(zhàn)！
配好配置只是第一步，在項目里跑起來才是王道。
在vue文件的script標簽里添加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"
這里拿之前寫的sidbar的代碼當個栗子：

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
  }
}

元數(shù)據(jù)寫在@Component配置里，像名字，用到的組件啥的，然后說下之前vue里用到的各個實例屬性方法在這里怎么用：

data: 這個是最常用的，像上面的SidebarMenu（這里一共聲明了4個），注意這里聲明的
變量一定要賦一個值，沒有就null,不能是undefined，不然這個數(shù)據(jù)就不是響應的。因此HoverTopElem類里的屬性也是要有初始值，不然這些屬性也不是響應的

computed: 這里就是get函數(shù)，注意tsconfig.jsonp不配置"target": "es5"這里會報錯

prop: vue-property-decorator里面有Prop模塊，也可以在元數(shù)據(jù)聲明這個prop，然后在類里聲明一下這個變量就可以了，個人推薦第一種

watch: vue-property-decorator里的Watch模塊

methods: 方法像data一樣直接寫在類里就可以了（注意不要和周期鉤子同名）
各種生命周期鉤子: 直接寫就行
路由鉤子見vue-class-component文檔

至此，基本就可以像原來一樣寫vue組件了。

當然如果要想和原來一樣寫ts,還需要配置tslint,vue-cli自帶的eslint不識別一些ts語法，像public修飾符之類的，導致編譯失敗，因為ts還不是很熟練就沒想著配，有興趣的朋友可以試試。

GPU云服務器云服務器怎樣在oss中使用帶ip限制的訪問控制在php中使用組件在VBScript中使用類 webrtc在webview中使用問題

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84236.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
Vue2.5+ Typescript 引入全面指南

摘要：引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時的我，使用經(jīng)驗三個多月，完全空白，花了大概三個晚上把手頭項目遷移至，因此這篇文章更像個入門指引。見文章引入全面指南篇完整代碼見庫，分支為整合示例，分支為不含的基礎示例。 Vue2.5+ Typescript 引入全面指南系列目錄： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...

liangzai_cool 2019-08-21 17:26 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0