Vue2 Vue-cli中如何使用Typescript
这篇文章主要介绍Vue2 Vue-cli中如何使用Typescript,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
一、初步配置
首先安装官方插件vue-class-component,vue-property-decorator,配置webpack。
webpack配置如下:
修改入口文件
entry: {
app: './class="lazy" data-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": [
"class="lazy" data-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还不是很熟练就没想着配,有兴趣的朋友可以试试。
以上是“Vue2 Vue-cli中如何使用Typescript”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341