首頁 > web前端 > js教程 > 關於Vue2 Vue-cli中使用Typescript的設定介紹

關於Vue2 Vue-cli中使用Typescript的設定介紹

不言
發布: 2018-06-29 15:52:43
原創
2186 人瀏覽過

這篇文章主要介紹了Vue2 Vue-cli中使用Typescript的設定介紹,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

Vue作為前端三大框架之一截至到目前在github上以收穫44,873顆星,足以說明其以悄悄成為主流。以下這篇文章主要為大家介紹了Vue2 Vue-cli中使用Typescript的配置的相關資料,需要的朋友可以參考下。

前言

因為最近公司的團隊熱衷於vue框架,新專案想著練練typescript,於是開始了vue ts的踩坑之路...本文意在為和我有一樣想法的伙伴們省去踩坑的時間,下面話不多說了,來一起看看關於Vue2 Vue-cli中利用Typescript需要的配置是什麼吧。

一、初步配置

先安裝官方外掛程式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
 }
}
登入後複製

#二、實戰!

搭配好設定只是第一步,在專案裡跑起來才是王道。

在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
 }
}
登入後複製

元資料寫在@Component配置裡,像名字,用到的元件啥的,然後說下之前vue裡用到的各個實例屬性方法在這裡怎麼用:

data: 這個是最常用的,像上面的SidebarMenu(這裡一共聲明了4個),注意這裡聲明的變數一定要賦一個值,沒有就null,不能是undefined,不然這個資料就不是回應的。因此HoverTopElem類別裡的屬性也是要有初始值,不然這些屬性也不是回應的

computed: 這裡就是get函數,注意tsconfig.jsonp不配置"target": "es5"這裡會報錯

prop: vue-property-decorator裡面有Prop模組,也可以在元資料宣告這個prop,然後在類別裡宣告這個變數就可以了,個人推薦第一種

watch: vue-property-decorator裡的Watch模組

methods: 方法像data一樣直接寫在類別裡就可以了(注意不要和周期鉤子同名)

##各種生命週期鉤子: 直接寫就行


路由鉤子見vue-class-component文件

至此,基本上就可以像原來一樣寫vue元件了。

當然如果要想和原來一樣寫ts,還需要配置tslint,不然一些ts語法不會被識別,像public修飾符之類的,因為ts還不是很熟練就沒想著配,有興趣的朋友可以試試。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何解決關於Vue背景圖打包之後存取路徑錯誤的問題

基於casperjs和resemble .js實作一個像素對比服務

在vue專案建立的後初始化首次使用stylus安裝方法的介紹

##

以上是關於Vue2 Vue-cli中使用Typescript的設定介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板