解锁个性化健康之旅：用Vue 3打造女朋友体重记录应用

前言

作为一位关心女友健康的前端开发者，我想为她创建一个个性化体重记录应用。本系列文章将带你踏上这场技术探索之旅，我们将使用 Vue 3、Vite、Vant 等时下流行的前端技术，打造一款既实用又贴心的体重记录应用。

技术栈选择

• Vue 3： 响应式和高效的 JavaScript 框架，提供灵活的组件化开发。
• Vite： 基于原生 ESM 的前端构建工具，带来超快的开发体验。
• Vant： 移动端 UI 组件库，提供丰富的现成组件，助力快速开发。
• @vue/compiler-sfc： 解析 SFC（单文件组件）并生成 JavaScript 渲染函数的工具，增强开发效率。
• 彩色字体图标： SVG 图标，无需额外请求，提供更丰富的视觉体验。

开始吧

1. 初始化项目

使用 Vite CLI 初始化一个新的 Vue 3 项目：

npm create vite@latest my-weight-app --template vue-ts

2. 安装依赖项

安装 Vue 3、Vite、Vant 等依赖项：

npm install

3. 创建应用结构

创建以下目录和文件：

- src/
  - App.vue (应用根组件)
  - components/
    - WeightInput.vue (体重输入组件)
  - pages/
    - Home.vue (主页)

4. 编写应用组件

在 App.vue 中，添加以下代码：

<template>
  <div>
    <WeightInput />
  </div>
</template>

在 WeightInput.vue 中，添加以下代码：

<template>
  <div>
    <input type="number" v-model="weight" placeholder="输入体重" />
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      weight: 0,
    });
    return {
      state,
    };
  },
};
</script>

5. 移动端适配

使用 Vant 的 theme-chalk 主题，提供响应式布局和移动端样式。

6. 个性化配置

在 vite.config.ts 中，配置 Vant 主题和彩色字体图标：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import vant from 'vite-plugin-vant';

// ...

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vant({
      theme: {
        primary: '#409eff',
      },
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@icon-font-path': "'/fonts/iconfont.ttf'",
        },
      },
    },
  },
});

结语

至此，我们完成了女朋友体重记录应用的基本框架搭建。在接下来的文章中，我们将继续深入探讨数据持久化、图表可视化、交互优化等方面，让这款应用更加完善。请持续关注，共同开启技术探索之旅！