Practice: Personalized Application for Girlfriend – Weight Record (1)

This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

The purpose of this series is to help front-end newcomers familiarize themselves with modern front-end engineering development methods and the use of related technologies, and to popularize some general content

Content of this article

In order to improve the reading experience, this article will be divided into several sections. This section mainly discusses the front end

Initialize the Vue3+Vite+TS project
VantUI component library introduced
Mobile terminal adaptation
Custom component development
@vue/compiler-sfc
Use of colored font ICONS

background

Girlfriend every day in chanting :” I again fat, how not to eat food also did not see light”

In order to record each change in weight data, I downloaded several weight recording apps, but I was not satisfied with them (mainly dissatisfied with the content of the charts reflected in the data).

So we take out the keyboard ⌨🖰 to create a unique for her

demand

To make a long story short:

Basic Weight Record (CRUD)
Diversified statistical statements of data
- It reflects every change
- The final comparison to the first of the day
- A change in a specified time period
- . more

Technical solution

After clarifying the target users and user demands, the next step is to directly determine the technical solution

Application form: H5 (Mobile to Web application)

The front end

Framework: Vue3
Language: the TypeScript
Build tool: Vite2
Component: Vant UI
Network: Axios
CSS preprocessing: Sass

The back-end

Node.js + TypeScript
Database: Philippine relational database (MongoDB or document database for cloud development)

The deployment of

Both are deployed using the Serverless service, providing high performance and low cost

Back-end: Tencent Cloud Serverless applications
Front end: Tencent Cloud development – static resource hosting, this part of the tutorial poke this view

An overview of

The development of preparation

Project initialization

Initialize the project directly using the constructed ATQQ/vite-vue3-template template

Introducing the Vant UI

Add the dependent

yarn add vant@next
Copy the code

The configuration is imported on demand

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{libraryName: 'vant'.esModule: true.resolveStyle: (name) = > `vant/es/${name}/style`,},],}),]})Copy the code

// src/utils/vantUI.ts
import { App } from '@vue/runtime-core'

// Import on demand
import { Button } from 'vant'

const conponents = [Button]

export default function mountVantUI(app: App<Element>) {
  conponents.forEach((c) = > {
    app.component(c.name, c)
  })
}
Copy the code

page

The first phase is expected to have 4 pages:

Home page
The login
The function of panel
Weight records

Quickly create a 4-page template

# src/pages/├ ─ ─ 404# 404| └ ─ ─ index. Vue ├ ─ ─ dashboard# Function panel| └ ─ ─ index. Vue ├ ─ ─ funcs | └ ─ ─ weight# Weight record| └ ─ ─ index. Vue ├ ─ ─ the home# page| └ ─ ─ index. Vue └ ─ ─ login# login page└── index.vue: 6 file: 5Copy the code

The routing configuration

After the page is determined, configure the page route

src/router/routes/index.ts

import { RouteRecordRaw } from 'vue-router'
import Home from '.. /.. /pages/home/index.vue'

const NotFind = () = > import('.. /.. /pages/404/index.vue')
const Login = () = > import('.. /.. /pages/login/index.vue')
const DashBoard = () = > import('.. /.. /pages/dashboard/index.vue')
const Weight = () = > import('.. /.. /pages/funcs/weight/index.vue')

const routes: RouteRecordRaw[] = [
  { path: '/:pathMatch(.*)*'.name: 'NotFound'.component: NotFind },
  {
    path: '/'.name: 'index'.component: Home,
  },
  {
    path: '/login'.name: 'login'.component: Login,
  },
  {
    path: '/dashboard'.name: 'dashboard'.component: DashBoard,
  },
  {
    path: '/funs/weight'.name: 'weight'.component: Weight,
  },
]

export default routes
Copy the code

Place the top-level router-View component in app.vue

src/App.vue

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>
Copy the code

Mobile terminal adaptation

Start by adding a sentence to the HTML template

<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
Copy the code

The size unit is REM scheme, and the design draft is determined by 375

By investigating the existing responsive websites and the actual measurement in the simulator, the sizes are mainly divided into four types: 320,360,375,414, and the following results are obtained:

HTML root element font size
- 320:12 px
- 360：13.5px = 360/320*12
- 375：14.0625px = 375/320*12
- 414: Use scheme 375

You can use the media query processing unit setup directly

Add the following code to app.vue:

<style>
@media screen and (min-width: 320px) {
  html {
    font-size: 12px; }}@media screen and (min-width: 360px) {
  html {
    font-size: 13.5 px.; }}@media screen and (min-width: 375px) {
  html {
    font-size: 14.0625 px.; }}</style>
Copy the code

Note: Since the content defined later is used when the style weights are the same, the larger media query code is placed later

TODO: Add style weights to calculate articles

To improve the user experience, the top container label is fixed at 414px

Add the following code to app.vue:

<style scoped>
.app {
  max-width: 414px;
  margin: 0 auto;
}
</style>
Copy the code

Page development

When the preparation is almost complete, start pasting the page

Because paste page is a physical work, no nutrition, the article only posted some key code, complete the code, go to the warehouse to explore

Page uses @vUE/compiler-SFC scheme, development efficiency, code more intuitive

Source of gradients used: Webgradients

Home page

Complete source code

The page contains only the application name, introduction, and navigation and login

<template> <div class="home"> <h1 class="title"> </h1> <! < div class="introduce"> < div class="introduce"> < div class="introduce"> < div class="introduce"> index) in introduces" :key="index">{{ item }}</p> </section> <section class="introduce"> <p> <router-link to="/login"> </van-button> </router-link> </p> </section> </div> </template> <script lang="ts" setup> import { reactive } from 'vue' const introduces: Const loginColor = 'gradient(to right, # b8cbb80%, # b8cbb80%, # b8cbb80%, # b8cbb80%) #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%)' </script>Copy the code

The login page

Complete source code

Avoid cumbersome registration process and use SMS verification code to log in

This page develops a custom Input component

The effect is as follows, including icon, input area, input prompt, pay attention to prompt 4 parts of content

Component complete source code

The Dom structure is as follows

<template>
  <div class="under-input">
    <van-icon class="icon" v-if="icon" :name="icon" />
    <input
      :maxlength="maxLength"
      :placeholder="placeholder"
      :type="type"
      :value="modelValue"
      @input="handleInput"
    />
  </div>
  <p v-if="tips" class="tips">
    {{ tips }}
  </p>
</template>
Copy the code

The input is validated using a simple re

/ / cell phone number
export const rMobile = /^[1]\d{10}$/
/ / verification code
export const rCode = /\d{4}/
Copy the code

Function page

Complete source code

After investigating some similar applications, I finally chose to show each functional entrance in the form of cards

The card component mainly contains two parts: function introduction and color icon. The effect is as follows

The Dom structure is as follows:

<template> <div class="fun-card" :class="{ disabled, }" > <div> <h1 class="title">{{ title }}</h1> </div> <span v-if="icon" :class="[icon]" class="iconfont icon"></span> <! -- lock --> <div v-if="disabled" class="lock"> <span class="icon-lockclosed iconfont"> </span> </div> </div> </template>Copy the code

Color font ICONS

Color icon useiconfont
Introduce steps into the project

Simply introduce CSS resources into the template and write the class when using it

<! -- index.html -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2609471_9womj4g1e15.css">
Copy the code

<! -- Use icon -->
<span class="icon-lockclosed iconfont"> </span>
Copy the code

This effect

Online preview address

Data summary

Repository source code
Project template: vite-vue3-template
Initialize the project using the template
Iconfont: An introduction to Color Font ICONS
Color icon introduction steps
Gradients: Webgradients
@ vue/compiler – used SFC
Online screenshot with shell generated

Practice: Personalized Application for Girlfriend – Weight Record (1)

Practice: Personalized Application for Girlfriend – Weight Record (1)

Content of this article

background

demand

Technical solution

The front end

The back-end

The deployment of

An overview of

The development of preparation

Project initialization

Introducing the Vant UI

page

The routing configuration

Mobile terminal adaptation

Page development

Home page

The login page

Function page

Color font ICONS

This effect

Data summary

Related Posts

CSS Usage Trends in 2021

MVVM

JavaScript asynchronous and synchronous parsing