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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
javascript实现简单页面倒计时
Mar 02 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 批量删除 sql语句
2009/06/05 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
人力资源管理专业自荐书范文
2014/02/10 职场文书
元旦获奖感言
2014/03/08 职场文书
结婚保证书范文
2014/04/29 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
师德师风个人整改措施
2014/10/27 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
格林童话读书笔记
2015/06/30 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers