https://segmentfault测试数据/a/1190000011878086? 这个是另一个typescript配置的文件
>npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
vue与TypeScript集成配置最简教程
?
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? No1 2 3 4 5 6 7 8 9 10
安装TypeScript相关依赖和项目其余依赖，用npm或cnpm
# cd /vue-typescript # npm install typescript ts-loader --save-dev # npm install1 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 dev1
测试成功，现在是一个TypeScipt项目了
进阶
配置官方推荐的 vue-class-component ， https://cn.vuejs.org/v2/guide/typescript.html
安装开发依赖
# npm install --save-dev vue-class-component1
修改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测试数据/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集成配置最简教程的详细内容...