Medical consultation project (vue3+ts)

1: Project construction

Create a project using create-vue scaffolding

1. Create command

pnpm create vue

# or
npm init vue@latest

# or
yarn create vue

2. Select project dependent content

✔ Project name: … patients-h5-100
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`
Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:
  cd patient-h5-100
  pnpm install
  pnpm lint
  pnpm dev

3. Download and run the third-party package

pnpm i

pnpm dev

Plugins required for project development

Required:

Vue Language Features(Volar) vue3 syntax support

Better ts hints in TypeScript Vue Plugin (Volar) vue3

Eslint (If Prettier is installed, disable it first to avoid conflicts

eslint prefab configuration:

1. Add the following configuration to the eslintrc file:

rules: { 
  'prettier/prettier': [
    'warn',
    {
      singleQuote: true,
      semi: false,
      printWidth: 100,
      trailingComma: 'none',
      endOfLine: 'auto'
    }
  ],
  'vue/multi-word-component-names': [
    'warn',
    {
      ignores: ['index']
    }
  ],
  'vue/no-setup-props-destructure': ['off'] 
}

2. Execute the repair command:

# fix format
pnpm lint

3. vscode opens eslint automatic repair (open Json settings file)

"editor.codeActionsOnSave": {
  "source.fixAll": true,
},

Development Preparation - Routing Code Analysis

// 导入函数
//  createRouter：创建路由实例
//  createWebHistory：创建 history 路由模式  localhost:3000/login
//  createWebHashHistory：创建 hash 路由模式 localhost:3000/#/login
import { createRouter, createWebHistory } from 'vue-router'

// 创建路由对象
const router = createRouter({
  // 设置路由模式(history模式)
  //  import.meta.env.BASE_URL：会去 vite.config.ts 中去取出配置项 base 中的值
  //  将来请求页面路径时，会带上这个 base 路径
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

Development preparation - integrated vant component library:

1. Install vant

# Vue 3 project, install the latest version of Vant
npm i vant
# Install
yarn add vant through yarn
# Install
pnpm add vant  through pnpm

2. Import the style in main.js, pay attention to put it in front of the global style, so as to facilitate the global custom css variable coverage later 

// import vant style import 'vant/lib/index.css'

// Import global styles import './styles/main.scss'

vant imports components and styles on demand, here you only need to import components on demand

1. Install on-demand import dependency packages

# Install npm through
npm i unplugin-vue-components -D
# Install yarn through yarn
add unplugin-vue-components -D
# Install pnpm through pnpm
add unplugin-vue-components -D
 

2. Configure in vite.config.ts

 import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default d
efineConfig({   plugins: [ // plugin     vue()     for parsing single-file components ,     // auto-imported plugins, the parser can be vant element and-vue      Components ({       // dts: Automatically generate the type declaration file of the component       // The default is true, the type declaration file of the component has been provided in vant, you can close       dts: false,       // importStyle: Automatically import the component style       // The default is true, Styles have been introduced in main.ts,       resolvers can be closed manually: [VantResolver({ importStyle: false })]     })   ],   resolve: {     alias: {       '@': fileURLToPath(new URL('./src', import.meta.url))     }   } })

3. Use the component directly (note that there may be no attribute hints, such as size, type, if you need hints, you can write import {} from 'vant' in the js code)

<van-button type="primary">主要按钮</van-button>

<van-button type="success">成功按钮</van-button>

 LoginModule - Packaged svg map

Goal: Pack the svg image into the project according to the icons file, and use the icon through the component

• You can use the third-party package vite-plugin-svg-icons
• vite-plugin-svg-iconsFeatures:
  • Preloading Generate all icons (sprite map: svg map) when the project is running, only need to operate dom once
  • High-performance  built-in cache, which will only be regenerated when the file is modified

use:

1. Install the plugin 

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
 

2. Using plugins

import { VantResolver } from 'unplugin-vue-components/resolvers'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: false,
      resolvers: [VantResolver({ importStyle: false })]
    }),
    createSvgIconsPlugin({
      // 指定图标文件夹，绝对路径（NODE代码）
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ],

 

3. Import icon in main.js

// 导入生成的虚拟精灵图
import 'virtual:svg-icons-register'

4. Use svg map

<svg aria-hidden="true">
  <use xlink:href="#icon-login-eye-off" />
</svg>

LoginModule - wraps the svg component

• svg 精灵地图The process is very tedious when using
• Can we make our svg 精灵地图project vant as convenient as using icons in :<van-icon name="chat-o" />

step:

1. Encapsulate the svg component

 a. Create the file components/CpIcon.vue

<script setup lang="ts">
defineProps<{
  name: string
}>()
</script>
<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>
<style scoped lang="scss">
.cp-icon {
  // 和字体一样大
  width: 1em;
  height: 1em;
}
</style>

b. Encapsulate components in types/components.d.ts

import CpNavBar from '@/components/CpNavBar.vue'
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
  interface GlobalComponents {
    CpNavBar: typeof CpNavBar
    CpIcon: typeof CpIcon
  }
}

c. Use in /Login/index.vue

<van-field placeholder="请输入密码" type="password">
  <template #right-icon>
    <cp-icon name="login-eye-off"></cp-icon>
  </template>
</van-field>

Login module - complete the eye opening function of the password box

need

• After adding an icon to the password box:
  • By default, the icon is closed eyes: the password is displayed as cipher text
  • Click the eye-closed icon: the icon is changed to open-eye effect

step

1. views/Login/index.vuein
   1. define variables

// 3.0 密码框的睁眼功能
const show = ref(false)
const mobile = ref('')
const password = ref('')

 2. Control icons 

<van-field** v-model="mobile"** placeholder="请输入手机号" type="tel"></van-field>
<van-field** v-model="password"** placeholder="请输入密码"** :type="show ? 'text' : 'password'"**>
  <template #right-icon>
    <cp-icon **@click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"**></cp-icon>
  </template>
</van-field>