vue cli4.0项目引入typescript的方法


Posted in Javascript onJuly 17, 2020

现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript。

1.执行安装命令

npm install --save-dev typescript
npm install --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 文件,文件内容如下:

declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

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 }
})
export default class App extends Vue{
 old_back:object=null,
 transitionName:string = "slide-right";
 get ...mapState("base", ["loadingStatus"]);
 @Watch('$route')
 onChangeValue(to:object, from:object){
  // console.log('$route', to, from)
  const noBack = to.meta.noBack; // 监听路由变化时的状态为前进还是后退
  // 去终节点左,从终节点过来右
  if (to.meta.last) {
  this.transitionName = "slide-left";
  } else if (from.meta.last) {
  this.transitionName = "slide-right";
  } else if (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("User pressed!");
  },
  "报警详情",
  "确定"
  );
 }
}

到此这篇关于vue cli4.0项目引入typescript的文章就介绍到这了,更多相关vue cli4.0引入typescript内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
js实现省级联动(数据结构优化)
Jul 17 #Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 #Javascript
jquery实现有过渡效果的tab切换
Jul 17 #jQuery
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 #Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 #Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 #Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
详解Python循环作用域与闭包
2019/03/21 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
django orm模块中的 is_delete用法
2020/05/20 Python
没编程基础可以学python吗
2020/06/17 Python
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
知识竞赛主持词
2014/03/26 职场文书
三八妇女节活动总结
2014/05/04 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
八年级作文之友谊
2019/12/02 职场文书
python某漫画app逆向
2021/03/31 Python
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS