使用Vue3+Typescript+Vite快速搭建项目

项目搭建

1. 创建项目

vue create vite-vue3-ts-project

2. 选择Vue 3和TypeScript模板

3. 安装依赖项

npm install

文件结构

项目的文件结构如下：

├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   ├── main.js
│   ├── router
│   │   ├── index.js
│   │   └── routes.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   ├── styles
│   ├── views
│   └── vite-env.d.ts
├── tsconfig.json
├── vite.config.js
└── yarn.lock

组件创建

在src/components目录下创建组件文件，如HelloWorld.vue：

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

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style>
  div {
    color: red;
  }
</style>

路由配置

在src/router/index.js中配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

运行项目

npm run dev

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

总结

本文介绍了如何使用Vue3、Typescript和Vite快速搭建一个项目，包括项目创建、文件结构、组件创建、路由配置等内容，帮助前端开发者快速上手Vue3+Typescript+Vite开发环境。