vue cli4.0项目引入typescript的方法
现有的项目是采用vuecli4.0脚手架生成的，现在想要引入typescript。
1.执行安装命令
npminstall--save-devtypescript npminstall--save-dev@vue/cli-plugin-typescript
2.根目录下新建tsconfig.json
{
"compilerOptions":{
"target":"esnext",
"module":"esnext",
"strict":true,
"importHelpers":true,
"moduleResolution":"node",
"experimentalDecorators":true,
"esModuleInterop":true,
"allowSyntheticDefaultImports":true,
"sourceMap":true,
"baseUrl":".",
"allowJs":false,
"noEmit":true,
"types":["webpack-env"],
"paths":{
"@/*":["src/*"]
},
"lib":["esnext","dom","dom.iterable","scripthost"]
},
"exclude":["node_modules"]
}
3.新增shims-vue.d.ts
根目录下新建shims-vue.d.ts，让ts识别*.vue文件，文件内容如下：
declaremodule'*.vue'{
importVuefrom'vue';
exportdefaultVue;
}
4.修改入口文件后缀
src/main.js=>src/main.ts
5.改造.vue文件
src/main.js=>src/main.ts
加上lang=ts可以让webpack识别此段代码为typescript
6.使用装饰器插件
vue-class-component：强化Vue组件，使用TypeScript装饰器增强Vue组件，使得组件更加扁平化
vue-property-decorator：在vue-class-component上增强更多的结合Vue特性的装饰
Demo：
import{Vue,Component,Watch}from'vue-property-decorator';
@Component({
components:{Loading}
})
exportdefaultclassAppextendsVue{
old_back:object=null,
transitionName:string="slide-right";
get...mapState("base",["loadingStatus"]);
@Watch('$route')
onChangeValue(to:object,from:object){
//console.log('$route',to,from)
constnoBack=to.meta.noBack;//监听路由变化时的状态为前进还是后退
//去终节点左，从终节点过来右
if(to.meta.last){
this.transitionName="slide-left";
}elseif(from.meta.last){
this.transitionName="slide-right";
}elseif(from.meta.leaf){
//从其它叶子页面过来的，往右
this.transitionName="slide-right";
}else{
if(noBack){
//去到不需要返回的界面往右
this.transitionName="slide-right";
}else{
this.transitionName="slide-left";
}
}
}
@Watch('loadingStatus')
onChangeValue(newVal:string){
if(newVal){
setTimeout(_=>{
this.setLoading(false);
},1500);
}
}
//弹出系统提示对话框
showAlert(msg:string){
plus.nativeUI.alert(
msg,
function(){
//console.log("Userpressed!");
},
"报警详情",
"确定"
);
}
}
到此这篇关于vuecli4.0项目引入typescript的文章就介绍到这了,更多相关vuecli4.0引入typescript内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！