使用Vue CLI 3创建Vue.js 3 + TypeScript项目

一、从头开始创建一个新的Vue.js 3 + TypeScript项目

1. 安装Vue CLI 3

npm install -g @vue/cli

2. 创建一个新的Vue.js 3项目

vue create my-vue3-ts-project

3. 选择TypeScript作为项目语言

在弹出的选项中，选择“Yes”。

4. 安装依赖

npm install

5. 运行项目

npm run serve

项目现在将在http://localhost:8080上运行。

二、将TypeScript添加到一个现有的Vue.js项目中

1. 安装TypeScript

npm install typescript --save-dev

2. 在tsconfig.json文件中配置TypeScript

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "sourceMap": true,
    "jsx": "react",
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. 将TypeScript添加到您的Vue.js项目中

在您的Vue.js项目的src目录中，创建一个名为“components”的新目录。然后，在该目录中创建一个名为“HelloWorld.vue”的新文件。

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

4. 将TypeScript添加到您的Vue.js配置文件中

在您的Vue.js项目的根目录中，打开vue.config.js文件。然后，在该文件中添加以下代码：

module.exports = {
  transpileDependencies: [
    'vuetify'
  ]
}

5. 运行项目

npm run serve

项目现在将在http://localhost:8080上运行。

总结

本教程介绍了如何使用Vue CLI 3创建Vue.js 3 + TypeScript项目。我们还介绍了如何将TypeScript添加到一个现有的Vue.js项目中。