Vite新建一个vue3 ts项目：快速入门

2023-09-19 22:17:14

Vite创建Vue3 TS项目

Vite是一个用于构建现代JavaScript应用程序的前端构建工具。它具有快速、轻量级和模块化的特点，非常适合构建Vue3项目。在Vite中创建Vue3 TS项目非常简单，只需几个步骤即可完成。

初始化项目

首先，我们需要使用Vite提供的命令行工具创建一个新的项目。打开终端，输入以下命令：
```
npm create vite@latest my-vue3-ts-project
```
这将创建一个名为"my-vue3-ts-project"的新项目，并安装必要的依赖项。
进入项目目录

接下来，我们需要进入新创建的项目目录：
```
cd my-vue3-ts-project
```

安装依赖项

接下来，我们需要安装Vue3和TypeScript的依赖项：

npm install --save vue@3
npm install --save-dev typescript @vitejs/plugin-vue

创建Vue文件

现在，我们可以创建一个Vue文件了。在"src"目录下创建一个名为"App.vue"的文件，并在其中添加以下代码：

<template>
  <h1>{{ message }}</h1>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vite!')
    return {
      message
    }
  }
}
</script>

创建TypeScript文件

接下来，我们需要创建一个TypeScript文件来定义Vue组件的类型。在"src"目录下创建一个名为"App.ts"的文件，并在其中添加以下代码：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello, Vite!'
    }
  }
})

修改Vite配置

最后，我们需要修改Vite的配置来支持TypeScript。在"vite.config.js"文件中，添加以下代码：

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('my-')
        }
      }
    })
  ],
  build: {
    lib: {
      entry: 'src/lib.ts',
      name: 'MyLib',
      fileName: 'my-lib'
    }
  }
}