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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
动态加载js的几种方法
2006/10/23 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Django 静态文件配置过程详解
2019/07/23 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
满月酒答谢词
2014/01/14 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
教师节标语大全
2014/10/07 职场文书