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 相关文章推荐
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
基于匀速运动的实例讲解(侧边栏,淡入淡出)
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/10/09 PHP
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
浅析is_writable的php实现
2013/06/18 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php简单smarty入门程序实例
2015/06/11 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
基于vue.js组件实现分页效果
2018/12/29 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
对Python中的@classmethod用法详解
2018/04/21 Python
django的ORM操作 增加和查询
2019/07/26 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
《胖乎乎的小手》教学反思
2014/02/26 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
安全生产计划书
2014/05/04 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
建设工程授权委托书
2014/09/22 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
应届生简历自我评价
2015/03/11 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS