vue项目引入typescript（vue与ts混用）

说明

为什么要在vue项目中使用ts？新公司给了一个关于vue项目的需求，又由于ts是JavaScript的超集，强类型数据，组件化友好。故我选择在vue项目中引入ts。

下载typescript和loader

npm install typescript ts-loader --save-dev

2. 安装vue-property-decorator

npm install vue-property-decorator --save-dev

3. 配置vue.config.js 添加下面的代码

configureWebpack: {    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    module: {        rules: [    {    test: /\.tsx?$/,    loader: 'ts-loader',    exclude: /node_modules/,    options: {appendTsSuffixTo: [/\.vue$/],    }    }        ]    }    }

4. 新建tsconfig.json放在项目根目录

{"compilerOptions": {"target": "es5","module": "commonjs","strict": true,"strictNullChecks": true,"esModuleInterop": true,"experimentalDecorators": true}
}

5. 在src根目录下新建vue-shim.d.ts 这个文件可以让vue识别ts文件（不加会报错）

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

vue项目引入ts成功。喜欢的点个赞吧

vue项目引入typescript（vue与ts混用）相关推荐

vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一安装axios依赖 npm install axios 二引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化未引入 CDN前 main.js 更改CDN方式引入在 vue.config 中引入 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...

vue项目引入typescript（vue与ts混用）

vue项目引入typescript（vue与ts混用）相关推荐

最新文章

热门文章