vite创建vue3+ts项目
时间: 2025-06-20 22:06:06 浏览: 18
### 创建 Vue 3 和 TypeScript 的 Vite 项目
为了创建一个基于 Vue 3 和 TypeScript 的 Vite 项目,可以按照以下方法操作:
#### 初始化项目
运行以下命令来初始化一个新的 Vite 项目,并选择 Vue 和 TypeScript 支持:
```bash
npm init vite@latest
```
或者如果使用 Yarn,则执行:
```bash
yarn create vite
```
在提示中输入项目的名称,例如 `vite-project`。接着,在框架选项中选择 `vue` 并按回车键确认。
当被询问变体(variant)时,选择带有 TypeScript 支持的选项 `vue-ts`[^1]。
#### 安装依赖项
进入新创建的项目目录并安装必要的依赖项:
```bash
cd vite-project
npm install
```
启动开发服务器以验证设置是否成功:
```bash
npm run dev
```
#### 添加 Vue Router
为了让项目支持路由功能,还需要安装 `vue-router` 库:
```bash
npm install vue-router@4
```
#### 设置 ESLint
推荐配置 ESLint 来保持代码质量一致。可以通过以下命令初始化 ESLint 配置文件:
```bash
pnpm create @eslint/config
```
根据向导完成配置过程,确保选择了适用于浏览器环境、Vue 框架以及 TypeScript 的选项[^3]。
最终会提示是否立即安装所需依赖包,请选择“Yes”,然后指定使用的包管理工具(如 npm 或 pnpm)。
---
### 示例代码结构
以下是典型的项目文件夹布局示例:
```
/vite-project
├── node_modules/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ └── logo.png
│ ├── components/
│ │ └── HelloWorld.vue
│ ├── router/
│ │ └── index.ts
│ ├── views/
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue
│ └── main.ts
├── .eslintrc.cjs
├── vite.config.ts
└── package.json
```
其中,`main.ts` 是入口文件的一个例子:
```typescript
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
而这是简单的路由器定义方式:
```typescript
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: AboutView,
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
export default router
```
---
阅读全文
相关推荐


















