创建 Vue 3.0 项目并配置 TypeScript
首先，你可以使用 Vue CLI 创建一个新的 Vue 3.0 项目，并选择 TypeScript 作为你的项目配置。如果你已经有一个现有的项目，你也可以手动配置 TypeScript。
# 使用 Vue CLI 创建项目
vue create my-vue-project
在创建项目时选择 Manually select features，然后选择 TypeScript。
配置 tsconfig.json
Vue 3.0 使用 TypeScript，需要在项目中添加 tsconfig.json 文件。以下是一个简单的配置示例：
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"strictPropertyInitialization": false,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"allowJs": true,
"checkJs": true,
"declaration": true,
"skipLibCheck": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"allowUnusedLocals": false,
"strictFunctionTypes": false,
"strictNullChecks": false,
"skipDefaultLibCheck": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitAny": false,
"noImplicitReturns": false
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
请注意，这只是一个简单的配置，你可以根据你的项目需要进行更多的自定义。
创建 TypeScript 的 Vue 组件
在 TypeScript 中编写 Vue 组件的主要区别在于你需要为组件的 props、data、methods 等明确定义类型。以下是一个简单的 TypeScript Vue 组件的示例：
// HelloWorld.vue
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
data() {
return {
message: 'Hello, Vue 3!'
};
},
methods: {
increment() {
console.log('Button clicked!');
}
}
});
</script>
<style scoped>
h1 {
color: blue;
}
</style>
这里使用了 defineComponent 函数来定义组件，以及 ref 来声明响应式数据。你还可以为组件的 props 和事件等定义类型。
通过这些简单的配置和示例，你就可以在 Vue 3.0 项目中使用 TypeScript 编写组件了。
转载请注明出处：http://www.zyzy.cn/article/detail/527/Vue 3.0