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 相关文章推荐
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
js实现图片360度旋转
Jan 22 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
php转换颜色为其反色的方法
2015/04/27 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Python求解平方根的方法
2015/03/11 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python递归函数实例讲解
2019/02/27 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
绿色出行口号
2014/06/18 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL