使用jsx和typescript配置vue开发环境
vue init webpack my-project
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"experimentalDecorators": true,
"jsx": "preserve",
"jsxFactory": "h"
}
}
npm i -D typescript ts-loader
npm i vue-class-component
entry: {
app: './src/main.ts'
}
resolve: {
extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
}
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.tsx$/,
exclude: /node_modules|vue\/src/,
loader: ['babel-loader', 'ts-loader']
}
]
}
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
import Vue, { VNode } from "vue"
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
在ts文件中引用vue文件时,需要加上后缀.vue
import App from './App.vue'
script标签修改为<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component
export default class Hello extends Vue {
helloTimes: number = 0;
sayHello () {
this.helloTimes++;
}
}
文件的扩展名为tsx
import Vue, { CreateElement } from 'vue'
import Component from 'vue-class-component'
@Component
export default class World extends Vue {
render(h: CreateElement) {
return <p>This is rendered via TSX</p>
}
}