vite vue3 ts vant 项目搭建
时间: 2025-03-11 14:07:48 浏览: 35
### 使用 Vite、Vue3、TypeScript 和 Vant 搭建项目的教程
#### 创建项目结构
为了初始化一个新的基于 Vite 的 Vue 3 项目并启用 TypeScript 支持,可以在命令行执行如下操作:
```bash
npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
```
这会创建一个名为 `my-vue-app` 的新目录,并设置好基础配置来支持 Vue 3 和 TypeScript[^2]。
#### 安装依赖项
进入刚创建的项目文件夹后,通过 npm 或 yarn 来安装所需的包。对于本案例来说,除了默认已经包含的内容外还需要额外引入 Vant 组件库及其样式资源:
```bash
npm install vant @vant/touch-emulator
```
同时建议也一并安装 Axios 这样的 HTTP 请求客户端以便后续开发网络请求功能。
#### 配置 ESLint 及其插件
为了让代码质量更高更统一,在 `.eslintrc.cjs` 中加入对 Vue 文件的支持以及针对 TypeScript 编写的 ESLint 解析器和规则集:
```javascript
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended'
],
};
```
这里使用了 `eslint-plugin-vue` 插件来提供专门面向 Vue 单文件组件 (SFCs) 的 linting 功能[^1]。
#### 设置 Vant UI 库
在 main.ts 中导入全局使用的 Vant 组件或者按需加载特定模块以减少打包体积。如果希望整个应用都能访问某些常用控件,则可以直接全部引入;反之则推荐只载入实际需要用到的部分。
```typescript
import { Button, Field } from 'vant';
// 如果要一次性注册所有组件可替换为 import 'vant/lib/index';
app.use(Button).use(Field);
```
另外记得也要把相应的 CSS 加进来:
```css
/* src/assets/styles/global.css */
@import "vant/lib/index.css";
```
最后一步就是确保 HTML 页面里有正确的 `<link>` 标签指向这个自定义样式的路径。
#### 启动本地服务器测试环境
完成上述准备工作之后就可以启动开发模式下的 Webpack Dev Server 测试当前工程能否正常工作了:
```bash
npm run dev
```
此时应该能够在浏览器中看到由 Vite 提供服务的应用界面,证明一切顺利的话就标志着初步搭建完毕。
阅读全文
相关推荐


















