使用 Vue 3 + TypeScript + Vant 4 构建现代移动端应用

1. 引言

1.1 项目背景

随着移动互联网的发展，移动端应用的需求日益增长。Vue 3 提供了强大的响应式数据绑定和组件化开发能力，TypeScript 提供了类型安全，而 Vant 4 是一个轻量级、可靠的移动端 UI 库。本文将详细介绍如何使用 Vue 3 + TypeScript + Vant 4 构建现代移动端应用。

1.2 技术栈介绍

1.2.1 Vue 3

Vue 3 是 Vue.js 的最新版本，提供了更好的性能、更小的体积和更丰富的功能，如组合式 API、更好的 TypeScript 支持等。

1.2.2 TypeScript

TypeScript 是 JavaScript 的超集，提供了静态类型检查、类型推断等功能，有助于提高代码的可维护性和可读性。

1.2.3 Vant 4

Vant 4 是一个轻量级、可靠的移动端 UI 库，提供了丰富的组件和主题定制能力，适用于构建高性能的移动端应用。

2. 环境准备

2.1 安装 Node.js 和 npm

确保你的系统上安装了 Node.js 和 npm。可以通过以下命令检查是否已安装：

node -v
npm -v

2.2 创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

npm install -g @vue/cli
vue create my-mobile-app
cd my-mobile-app

在创建过程中选择 Vue 3 和 TypeScript 支持。

2.3 集成 TypeScript

在创建项目时选择 TypeScript 支持，Vue CLI 会自动配置 TypeScript。

2.4 安装 Vant 4

安装 Vant 4 及其 TypeScript 类型定义：

npm install vant@next
npm install @types/vant@next --save-dev

3. 项目结构

3.1 基本目录结构

my-mobile-app/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
├── package.json
├── tsconfig.json
├── vue.config.js

3.2 主要文件介绍

public/index.html: 应用的入口 HTML 文件。
src/main.ts: 应用的入口文件，初始化 Vue 实例。
src/App.vue: 应用的根组件。
src/router/index.ts: 路由配置文件。
src/store/index.ts: 状态管理配置文件。
src/components/: 存放可复用的组件。
src/views/: 存放页面组件。

4. 基本配置

4.1 配置 TypeScript

确保 tsconfig.json 配置正确：

{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","experimentalDecorators": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["webpack-env"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue"],"exclude": ["node_modules"]
}

4.2 配置 Vant 4

在 main.ts 中引入 Vant 4：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vant from 'vant';
import 'vant/lib/index.css';const app = createApp(App);
app.use(router);
app.use(store);
app.use(Vant);
app.mount('#app');

4.3 配置路由

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

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import('../views/About.vue')}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

4.4 配置状态管理 (Vuex)

在 src/store/index.ts 中配置 Vuex：

import { createStore } from 'vuex';export default createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},modules: {}
});

5. 组件开发

5.1 创建基础组件

在 src/components/ 目录下创建一个基础组件 HelloWorld.vue：

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'HelloWorld',props: {msg: {type: String,required: true}}
});
</script><style scoped>
.hello {text-align: center;
}
</style>

5.2 使用 Vant 4 组件

在 src/views/Home.vue 中使用 Vant 4 组件：

<template><div class="home"><van-button type="primary" @click="increment">Increment</van-button><p>Count: {{ count }}</p></div>
</template><script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';export default defineComponent({name: 'Home',setup() {const store = useStore();const count = computed(() => store.state.count);const increment = () => {store.dispatch('increment');};return {count,increment};}
});
</script><style scoped>
.home {text-align: center;margin-top: 60px;
}
</style>

5.3 自定义组件

在 src/components/ 目录下创建一个自定义组件 CustomButton.vue：

<template><van-button :type="type" @click="handleClick"><slot></slot></van-button>
</template><script lang="ts">
import { defineComponent } from 'vue';export default defineComponent({name: 'CustomButton',props: {type: {type: String,default: 'default'}},emits: ['click'],setup(props, { emit }) {const handleClick = () => {emit('click');};return {handleClick};}
});
</script><style scoped>
.van-button {margin: 10px;
}
</style>

6. 样式管理

6.1 使用 CSS 预处理器 (Sass/SCSS)

在 src/assets/styles/ 目录下创建一个全局样式文件 _variables.scss：

$primary-color: #1989fa;
$secondary-color: #64b587;

在 src/assets/styles/main.scss 中引入全局样式：

@import './variables.scss';body {background-color: #f5f5f5;color: #333;
}.van-button {background-color: $primary-color;border-color: $primary-color;
}

在 main.ts 中引入全局样式：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Vant from 'vant';
import 'vant/lib/index.css';
import './assets/styles/main.scss';const app = createApp(App);
app.use(router);
app.use(store);
app.use(Vant);
app.mount('#app');