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');
6.2 使用 CSS 框架 (Vant 4 样式)
Vant 4 提供了丰富的样式和主题定制能力。确保在 main.ts 中引入 Vant 的样式文件：
import 'vant/lib/index.css'