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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 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类
2006/07/15 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
js实现简单扫雷
2020/11/27 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
python 限制函数调用次数的实例讲解
2018/04/21 Python
Python 多维List创建的问题小结
2019/01/18 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
计算机求职信
2013/12/01 职场文书
出国英文推荐信
2014/05/10 职场文书
个人债务授权委托书
2014/10/17 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2015年商场工作总结
2015/04/27 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
导游词之无锡唐城
2019/12/12 职场文书