資訊專欄INFORMATION COLUMN
摘要：這里拿之前寫的的代碼當(dāng)個(gè)栗子元數(shù)據(jù)寫在配置里，像名字，用到的組件啥的，然后說下之前里用到的各個(gè)實(shí)例屬性方法在這里怎么用這個(gè)是最常用的，像上面的這里一共聲明了個(gè)，注意這里聲明的變量一定要賦一個(gè)值，沒有就不能是，不然這個(gè)數(shù)據(jù)就不是響應(yīng)的。
公司的團(tuán)隊(duì)最近熱衷于vue框架，新項(xiàng)目想著練練typescript，于是開始了vue+ts的踩坑之路...
本文意在為和我有一樣想法的伙伴們省去踩坑的時(shí)間
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.實(shí)戰(zhàn)！
配好配置只是第一步，在項(xiàng)目里跑起來才是王道。
在vue文件的script標(biāo)簽里添加lang="ts"
因?yàn)閠s-loader不像配過loader的webpack一樣知道vue,html等文件是什么東西，你跑起來后會(huì)報(bào)模塊無法解析的錯(cuò)誤，所以還需要配置.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這四個(gè)，其它3個(gè)沒用到也沒研究，知道的大佬可以解釋下。）
import { Component, Vue, Watch } from "vue-property-decorator"
這里拿之前寫的sidbar的代碼當(dāng)個(gè)栗子：
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里用到的各個(gè)實(shí)例屬性方法在這里怎么用：
data: 這個(gè)是最常用的，像上面的SidebarMenu（這里一共聲明了4個(gè)），注意這里聲明的
變量一定要賦一個(gè)值，沒有就null,不能是undefined，不然這個(gè)數(shù)據(jù)就不是響應(yīng)的。因此HoverTopElem類里的屬性也是要有初始值，不然這些屬性也不是響應(yīng)的
computed: 這里就是get函數(shù)，注意tsconfig.jsonp不配置"target": "es5"這里會(huì)報(bào)錯(cuò)
prop: vue-property-decorator里面有Prop模塊，也可以在元數(shù)據(jù)聲明這個(gè)prop，然后在類里聲明一下這個(gè)變量就可以了，個(gè)人推薦第一種
watch: vue-property-decorator里的Watch模塊
methods: 方法像data一樣直接寫在類里就可以了（注意不要和周期鉤子同名）
各種生命周期鉤子: 直接寫就行
路由鉤子見vue-class-component文檔
至此，基本就可以像原來一樣寫vue組件了。
當(dāng)然如果要想和原來一樣寫ts,還需要配置tslint,vue-cli自帶的eslint不識(shí)別一些ts語法，像public修飾符之類的，導(dǎo)致編譯失敗，因?yàn)閠s還不是很熟練就沒想著配，有興趣的朋友可以試試。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84236.html
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個(gè)鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要：引入全面指南系列目錄引入全面指南引入全面指南篇寫在前面寫這篇文章時(shí)的我，使用經(jīng)驗(yàn)三個(gè)多月，完全空白，花了大概三個(gè)晚上把手頭項(xiàng)目遷移至，因此這篇文章更像個(gè)入門指引。見文章引入全面指南篇完整代碼見庫(kù)，分支為整合示例，分支為不含的基礎(chǔ)示例。 Vue2.5+ Typescript 引入全面指南 系列目錄： Vue2.5+ Typescript 引入全面指南 Vue2.5+ Typescrip...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 1447·2021-11-17 09:33
閱讀 3036·2021-10-13 09:39
閱讀 2712·2021-10-09 10:01
閱讀 2456·2021-09-29 09:35
閱讀 3907·2021-09-26 10:01
閱讀 3528·2019-08-26 18:37
閱讀 3156·2019-08-26 13:46
閱讀 1919·2019-08-26 13:39
