vue与TypeScript集成配置最简教程(推荐)


Posted in Javascript onOctober 17, 2017

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开。

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安装TypeScript相关依赖和项目其余依赖,用npm或cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

配置

修改目录下bulid/webpack.base.conf.js文件,在文件内module>rules添加以下规则

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

在src目录下新建一个文件vue-shims.d.ts,用于识别单文件vue内的ts代码

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

在项目根目录下建立TypeScript配置文件tsconfig.json

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

重命名src下的main.jsmain.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

修改src下的App.vue文件,在

<script lang="ts">

测试

下面可以测试是否集成成功,编辑src/components/Hello.vue文件,修改

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions<Vue>
</script>

运行项目

# npm run dev

测试成功,现在是一个TypeScipt项目了

 vue与TypeScript集成配置最简教程(推荐)

进阶

配置官方推荐的vue-class-component,https://cn.vuejs.org/v2/guide/typescript.html

安装开发依赖

# npm install --save-dev vue-class-component

修改ts配置文件,增加以下两项配置

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

改写我们的Hello组件

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }
</script>

使用vue-class-component后,初始数据可以直接声明为实例的属性,而不需放入data() {return{}}中,组件方法也可以直接声明为实例的方法,如官方实例,更多使用方法可以参考其官方文档

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = 'Hello!'
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
深入理解(function(){... })();
Aug 16 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
原生JS实现萤火虫效果
Mar 07 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
react中的ajax封装实例详解
Oct 17 #Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 #Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 #Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 #Javascript
You might like
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
详解Python中with语句的用法
2015/04/15 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python挖矿算力测试程序详解
2019/07/03 Python
python的re模块使用方法详解
2019/07/26 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
python 从list中随机取值的方法
2020/11/16 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
校运会入场式解说词
2014/02/10 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书