一：项目搭建

使用create-vue脚手架创建项目

1.创建指令

pnpm create vue

# or
npm init vue@latest

# or
yarn create vue

2.选择项目依赖内容

✔ 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.下载运行第三方包

pnpm i

pnpm dev

项目开发需要的插件

必装：

Vue Language Features(Volar) vue3语法支持

TypeScript Vue Plugin (Volar) vue3中更好的ts提示

Eslint (如果安装了Prettier先禁用，避免冲突

eslint 预制配置：

1.eslintrc文件中添加如下配置：

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.执行修复命令：

# 修复格式
pnpm lint

3.vscode 开启 eslint 自动修复（打开Json设置文件）

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

开发准备 - 路由代码解析

// 导入函数
//  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

开发准备 - 集成 vant 组件库:

1.安装vant

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

2.在main.js中导入样式，注意放在全局样式的前面，以便于后面进行全局自定义css变量覆盖

// 导入 vant 的样式 import 'vant/lib/index.css'

// 导入全局样式 import './styles/main.scss'

vant按需导入组件和样式，这里只需按需导入组件

1.安装按需导入依赖包

# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2.在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: [
// 解析单文件组件的插件
vue(),
// 自动导入的插件，解析器可以是 vant element and-vue
Components({
// dts：自动生成组件的类型声明文件
// 默认为 true, vant 中已经提供了组件的类型声明文件，可以关闭
dts: false,
// importStyle：自动引入组件样式
// 默认为 true, 在 main.ts 中已经引入了样式，可以手动关闭
resolvers: [VantResolver({ importStyle: false })]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

3.直接使用组件（注意这样使用可能会没有属性提示，比如size，type，如果需要提示可以在js代码写上import {} from 'vant'）

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

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

登录模块 - 打包 svg 地图

目标：根据 icons 文件svg图片打包到项目中，通过组件使用图标

可以使用第三方包 vite-plugin-svg-icons
vite-plugin-svg-icons特点：
- 预加载 在项目运行时就生成所有图标（精灵图：svg地图）,只需操作一次 dom
- 高性能 内置缓存,仅当文件被修改时才会重新生成

使用：

1.安装插件

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

2.使用插件

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.在main.js中导入图标

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

4.使用svg地图

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

登录模块 - 封装 svg 组件

使用 svg 精灵地图时，过程非常繁琐
能不能让我们的项目在使用 svg 精灵地图时像 vant 中使用图标时那么方便：<van-icon name="chat-o" />

步骤：

1.封装svg组件

a.创建文件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.在 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.在/Login/index.vue中使用

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

登录模块 - 完成密码框的睁眼功能

需求

给密码框添加图标后：
- 默认情况下图标为闭眼效果：密码显示为密文
- 点击闭眼图标：图标修改为睁眼效果

步骤

在 views/Login/index.vue中
1. 定义变量

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

2. 控制图标

<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>

医疗问诊项目（vue3+ts）