Vue3+TypeScript+Vite项目搭建及注意事项

2023-10-08 20:11:43

一、环境搭建

安装Node.js

确保您已经安装了最新版本的Node.js。您可以从Node.js官网下载安装程序并按照提示进行安装。
安装Vue CLI

Vue CLI是一个脚手架工具，可以帮助您快速创建和管理Vue项目。您可以通过以下命令安装Vue CLI：
```
npm install -g @vue/cli
```
初始化项目

使用Vue CLI创建一个新的项目。您可以通过以下命令在指定目录下创建项目：
```
vue create my-project
```
安装依赖项

项目创建完成后，您需要安装项目所需的依赖项。您可以使用以下命令安装依赖项：
```
npm install
```
运行项目

安装完依赖项后，您可以使用以下命令运行项目：
```
npm run serve
```

二、项目配置

tsconfig.json

tsconfig.json是TypeScript的配置文件，用于配置TypeScript编译器的选项。在Vue3+TypeScript项目中，您需要在项目根目录下创建tsconfig.json文件并配置相应的选项。例如，您可以将以下内容添加到tsconfig.json文件中：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src"
  ]
}

shim.d.ts

shim.d.ts是一个类型声明文件，用于解决找不到.vue模块的报错问题。在Vue3+TypeScript项目中，您需要在项目根目录下创建shim.d.ts文件并添加以下内容：
```
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
```

三、注意事项

别名配置

在Vue3+TypeScript项目中，您可以使用别名来简化模块的导入。例如，您可以将以下内容添加到tsconfig.json文件中：
```
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```
这样，您就可以使用@别名来导入模块，例如：
```
import { Component } from '@components/Component.vue'
```

全局组件注册

在Vue3+TypeScript项目中，您需要在main.ts文件中全局注册组件。例如，您可以将以下内容添加到main.ts文件中：

import { createApp } from 'vue'
import App from './App.vue'
import Component from './components/Component.vue'

createApp(App)
  .component('Component', Component)
  .mount('#app')

类型推断

在Vue3+TypeScript项目中，TypeScript可以根据变量的赋值来推断变量的类型。例如，您可以将以下内容添加到main.ts文件中：
```
const message = 'Hello World'

// TypeScript会推断message的类型为string
console.log(message)
```