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 Discuz代码中的msn聊天小功能
May 25 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
thinkphp分页实现效果
2016/10/13 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Django celery异步任务实现代码示例
2020/11/26 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
参观考察邀请函范文
2014/01/29 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
高三励志标语
2014/06/05 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Javascript之datagrid查询详解
2021/09/15 Javascript