vue与TypeScript集成配置最简教程
https://blog.csdn.net/u014633852/article/details/73706459
https://segmentfault.com/a/1190000011878086 这个是另一个typescript配置的文件
>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
vue与TypeScript集成配置最简教程
前言
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
安装TypeScript相关依赖和项目其余依赖,用npm或cnpm
# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install
- 1
- 2
- 3
resolve: {
extensions: ['.js', '.vue', '.json', '.ts', '.tsx']
}
配置
修改目录下bulid/webpack.base.conf.js
文件,在文件内module>rules
添加以下规则
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
// 从这里复制下面的代码就可以了
// 如果之前按照起手式配置的同学,请替换配置
{
test: /\.tsx?$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: Object.assign(vueLoaderConfig, {
loaders: {
ts: "ts-loader",
tsx: "babel-loader!ts-loader"
}
})
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
"babel-loader",
{
loader: "ts-loader",
options: { appendTsxSuffixTo: [/\.vue$/] }
}
]
},
// 复制截止
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在src目录下新建一个文件vue-shims.d.ts
,用于识别单文件vue内的ts代码
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
- 1
- 2
- 3
- 4
- 5
在项目根目录下建立TypeScript配置文件tsconfig.json
{
"compilerOptions": {
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"allowSyntheticDefaultImports": true,
"lib": [
"es2017",
"dom"
]
}
}
然后在 tsconfig.json
中,添加对jsx
的支持
"compilerOptions": {
"jsx": "preserve"
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
重命名src下的main.js
为main.ts
修改webpack.base.conf.js
下的entry>app
为'./src/main.ts'
修改src下的App.vue文件,在
<script lang="ts">
- 1
测试
下面可以测试是否集成成功,编辑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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
运行项目
# npm run dev
- 1
测试成功,现在是一个TypeScipt项目了
进阶
配置官方推荐的vue-class-component
,https://cn.vuejs.org/v2/guide/typescript.html
安装开发依赖
# npm install --save-dev vue-class-component
- 1
修改ts配置文件,增加以下两项配置
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
- 1
- 2
改写我们的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
使用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)
}
}
vue与TypeScript集成配置最简教程的更多相关文章
- Windows10 + Eclipse C/C++开发环境配置极简教程
下载安装Eclipse 访问下载Eclipse IDE for C/C++ Developers https://www.eclipse.org/downloads/packages/ 将下载下来的压 ...
- Nginx 极简教程(快速入门)
作者:dunwu github.com/dunwu/nginx-tutorial 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. ...
- nginx极简教程
Nginx 极简教程 本项目是一个 Nginx 极简教程,目的在于帮助新手快速入门 Nginx. examples 目录中的示例模拟了工作中的一些常用实战场景,并且都可以通过脚本一键式启动,让您可以快 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- Hexo+Github博客最简教程-Dockerfile自动搭建
闲谈 拿出你的气质,打开你的电脑,借你半小时搭建好属于你的hexo博客,小生用dockerfile自动帮你搭建好:你只需要在你的mac或linux或windows上提前把docker安装好,如何安装不 ...
- CentOS安装使用.netcore极简教程(免费提供学习服务器)
本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用. 仅针对CentOS,其它Linux系统类似,命令环节稍加调整: 需 ...
- webpack4 自学笔记二(typescript的配置)
全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...
- Asky极简教程:零基础1小时学编程,已更新前8节
Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...
- Spring Boot 集成配置 HTTPS
这是泥瓦匠的第108篇原创 文章工程: * JDK 1.8 * Maven 3.5.2 * Spring Boot 1.5.9.RELEASE ## 一.HTTPS 是什么 问:什么是HTTP? 答: ...
随机推荐
- 设计模式13:Template Method 模板方法模式(行为型模式)
Template Method 模板方法模式(行为型模式) 变与不变 变化——是软件永恒的主题,如何管理变化带来的复杂性?设计模式的艺术性和复杂度就在于如何分析,并发现体系中的变化点和稳定点,并使用特 ...
- 正则表达式(javascript)
在开发过程中要要把一个css中的平移的x,y提取出来 ,正好把正则表达式学习了一下 'fsdfsdfsdf300pxfdsfd200pxfsdfsdf100px' 找出里面 px前面的数字: 经查资 ...
- Linux删除(清空)正在运行的应用日志文件内容
在测试环境定位问题时,如果发现日志文件内容太多或太大,有时需要删除该日志,如Tomcat,Nginx日志.以前每次都是先rm -rf ***.log,然后重启应用.直到后来发现了以下命令,原来可以不用 ...
- Strict Weak Ordering
Description A Strict Weak Ordering is a Binary Predicate that compares two objects, returning true i ...
- WebApi中跨域请求的解决方案和原理
跨域请求仅发生在JavaScript发起Ajax请求时,浏览器对请求的限制,通常只允许访问同一个域中的资源,或者目标服务器明确的通知浏览器允许该域访问资源. 那么什么叫跨域的:主机地址或者ip地址或者 ...
- 按照已有的模板打印小票<二> ——调用windows打印机打印 可设置字体样式
按照已有的模板打印小票<二> ——调用windows打印机打印 可设置字体样式 之前写过一篇文章<按照已有的模板输出一(如发票)>,是关于如何给已有的模板赋值.在项目的实践过程 ...
- 手把手带你打造一个 Android 热修复框架
本文来自网易云社区 作者:王晨彦 Application 处理 上面我们已经对所有 class 文件插入了 Hack 的引用,而插入 dex 是在 Application 中,Application ...
- RabbitMq初探——php的一个demo
<?php /** * Created by PhpStorm. * Date: 2017/10/17 * Time: 16:21 */ class Rabbit { public functi ...
- kali linux之Backdoor-factory
Backdoor-------python编写 适用于windows PE x32/x64 和Linux ELF x32/x64(OSX),支持msf payload 自定义payload 将shel ...
- luogu4074 [WC2013]糖果公园(树上带修莫队)
link 题目大意:给一个树,树上每个点都有一种颜色,每个颜色都有一个收益 每次修改一个点上的颜色 或询问一条链上所有颜色第i次遇到颜色j可以获得w[i]*v[j]的价值,求链上价值和 题解:树上带修 ...