大前端开发 on 码上生长 - 探索个人成长的无限可能

前端业务组件封装与管理的解决方案

Sat, 26 Apr 2025 00:00:00 +0000

1. 前言

在前端开发中，业务组件的封装与管理是一个常见的难题。当多个项目共用同一个业务组件时，如何平衡不同项目的需求差异，同时保持组件的可维护性和可扩展性，成为了一个亟待解决的问题。

2 如何应对多项目需求差异

在业务组件封装过程中，我们常常会遇到这样的问题：项目 A 和项目 B 都使用了某个业务组件，但项目 A 迭代了需求，而这个需求在项目 B 中却用不到。如果这次为了满足项目 A 的需求而修改组件，那么未来项目 B 也可能出现类似但不完全相同的需求，难道每次都要通过特判来解决吗？

实际上，业务组件的问题并非孤立存在，而是整个前端项目开发流程中的一个环节。我们需要从更高的层次、更宏观的角度去看待，梳理整个前端项目的开发流程，预见可能面临的问题，并逐一讨论解决方案、进行应用和验证，而不仅仅是解决业务组件自身的问题。

3. 期望的应用场景

我们期望构建一个高效、灵活的前端开发流程，具体场景如下：

提供一个基础的项目模板，其中包含常用的业务组件，如登录注册、首页、个人中心、用户管理等。这样，新的项目可以直接基于模板启动，减少重复工作。
通过动态配置主题色等功能，满足客户项目的定制化需求。例如，不同客户可能对界面风格有不同偏好，通过风格配置平台可以快速实现定制。
在菜单管理中配置好路由，从业务组件库中引入所需的业务组件。如果现有组件不满足需求，则可以迭代现有组件或新增组件。

4. 通用性与灵活性

业务组件应具备通用功能，能够满足大部分项目的需求，从而减少重复开发，提高开发效率。当遇到特殊需求时，可以采用组合式函数的方式，将逻辑单独抽离出来复用。同时，提供样式自定义功能，通过增加一个 .vue 文件来实现样式定制，从而复用组合式函数。这种做法既保持了组件的通用性，又提供了足够的灵活性来应对不同项目的需求。

5. 确保质量和稳定性

为了保证业务组件的质量和稳定性，单元测试是必不可少的环节。主要包括以下两个方面：

对组件的逻辑代码进行测试，确保其功能正确无误。
测试组件之间的交互是否符合预期，例如父子组件之间的数据传递、事件触发等。

6. 满足多样化需求

业务组件的风格动态设置是一个关键问题。以当前常见的明亮和暗黑风格为例，问题的根本原因并不在于组件自身，而在于项目。因此，需要设置的不是业务组件的主题，而是项目的主题。而项目是基于我们提供的项目模板开发的，所以项目模板需要提供风格动态设置功能。

最佳的实现方式是通过可视化页面进行配置，然后生成 CSS 文件，将其引入到项目中进行配置。这就需要开发一个可视化主题配置平台，比如 Arco Design Lab 平台（平台使用指南），能够很好地满足这一需求。

7. 总结

通过建立一套完整的开发规范、提供风格动态设置功能，我们可以有效地解决多项目需求差异的问题，提高开发效率和质量。

展厅3D项目实现方案

Thu, 24 Apr 2025 00:00:00 +0000

前言

本项目旨在开发一个展厅3D展示系统，主要功能为监控大屏与3D城市沙盘显示。项目涉及两台电脑屏幕，分别标记为A和B。A屏幕用于展示3D城市沙盘，用户点击沙盘中的特定区域时，B屏幕将显示与该区域相关的效果视频。因此，项目的核心在于如何构建3D城市沙盘以及实现两台电脑之间的通信功能。

解决方案

最初计划使用Three.js来开发3D城市沙盘，并通过Electron开发两个独立的应用程序，分别部署在A和B电脑上以实现通信功能。然而，在项目推进过程中，我们发现3D城市沙盘可以通过视频形式实现，仅需由UI设计团队制作一个3D城市沙盘视频即可。对于沙盘大屏的左右旋转功能，可以通过捕获手势事件来控制视频播放器的快进和后退操作，从而避免了使用Three.js开发3D沙盘的复杂工作。

电脑间通信验证

基于electron-vite-vue和ws框架，我们开发了两个应用程序：客户端和服务端。客户端部署在主屏（A电脑），服务端部署在副屏（B电脑）。当系统启动时，服务端将在本地创建一个WebSocket服务器，监听8080端口。客户端则创建一个WebSocket客户端实例，连接至该服务器，从而实现两台电脑之间的通信功能。

假设B电脑的IP地址为192.168.28.112，我们首先在B电脑上创建一个WebSocket服务器，监听8080端口：

const WebSocket = require('ws');  
const wss = new WebSocket.Server({ port: 8080 });  
wss.on('connection', function connection(ws) {  
  ws.on('message', function incoming(message) {  
    console.log('received: %s', message);  
  });  
  ws.send('something');  
  ws.on('close', function clear() {  
    console.log('client disconnected');  
  });  
});

接下来，在A电脑上创建一个新的WebSocket客户端实例，连接到B电脑的WebSocket服务器，用于发送消息：

const WebSocket = require('ws');
// 本地调试
// const ws = new WebSocket('ws://localhost:8080');  
// 连接`B`电脑的 `WebSocket` 服务器
const ws = new WebSocket('ws://192.168.28.112:8080');
ws.on('open', function open() {
  console.log('connected');
  setInterval(() => {
    ws.send('Hello Server!' + Math.random());
  }, 3000)
});
ws.on('message', function incoming(data) {
  console.log(data);
});
ws.on('close', function clear() {
  console.log('disconnected');
});
ws.on('error', function error(err) {
  console.error('WebSocket Error: ', err);
});

通过上述实现，A和B电脑之间的通信效果如下：

Pinia持久化插件 pinia-plugin-persistedstate 的基本使用

Mon, 14 Apr 2025 00:00:00 +0000

前言

在Vue项目开发过程中，状态管理是至关重要的环节。随着Pinia的推出，它凭借更简洁直观的API，逐渐成为Vuex的有力替代品。为了进一步简化本地存储的管理，pinia-plugin-persistedstate 插件应运而生，它能够帮助开发者轻松实现状态的持久化。

本文将详细介绍如何使用该插件，并解决在跨项目登录时由于数据格式不一致导致的问题。

安装插件

在项目的根目录下运行以下命令以安装插件：

npm i pinia-plugin-persistedstate

随后，在main.ts文件中引入并配置插件：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

完成以上步骤后，Pinia便具备了持久化功能。

基本使用

假设我们需要管理用户信息userInfo，并将其持久化到本地存储中，那么就可以这样实现：

import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {
    state: () => ({
        userInfo: null as any
    }),
    persist: true,
    actions: {
        setUserInfo(info: any) {
            this.userInfo = info;
        }
    }
});

按照上述配置，用户信息将自动持久化到本地存储中。

仅持久化对象中的特定字段

在实际应用中，开发者可能会面临跨项目登录时出现的兼容性问题。具体场景为：用户在项目A完成登录操作后，随即打开项目B。由于Token的复用机制，项目B会自动完成登录流程。然而，在尝试获取用户信息userInfo时，由于不同项目对数据格式的定义存在差异，导致项目B无法准确获取用户的ID，进而无法基于此ID发起正确的网络请求。具体表现如下：

项目A的数据格式：{ name: 'xiaoming', nick_name: '小明', userID: '9527' }
项目B的数据格式：{ userInfo: { name: 'xiaoming', nick_name: '小明', userID: '9527' } }

由于插件默认将整个state对象存储起来，导致数据多了一层userInfo外壳，从而引发格式不一致的问题。

为了去掉userInfo这一层外壳，我们需要自定义序列化和反序列化逻辑。修改后的Store配置如下：

import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {
    state: () => ({
        userInfo: null as any
    }),
    persist: {
        key: 'userInfo',
        storage: localStorage,
        paths: ['userInfo'], // 明确声明要持久化的字段
        serializer: {
            serialize: (state: any) => JSON.stringify(state.userInfo),
            deserialize: (str: string) => ({ userInfo: JSON.parse(str) })
        }
    } as any,
    actions: {
        setUserInfo(info: any) {
            this.userInfo = info;
        }
    }
});

经过上述配置，用户信息的存储结构变为{ name: 'xiaoming', nick_name: '小明', userID: '9527' }，不再有额外的userInfo外壳，从而解决了跨项目登录时的格式不一致问题。

其他配置选项

在使用该插件时，虽然主要需求是“仅持久化对象中的特定字段”，因此只使用了serializer配置项，但插件还支持其他功能。以下是部分可选配置：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();

pinia.use(piniaPluginPersistedstate, {
  storage: localStorage,
  key: 'myCustomStoreKey', // 自定义存储键名
  debug: true, // 启用调试
  serializer: {
    serialize(state) {
      // 自定义序列化逻辑
      return JSON.stringify(state);
    },
    deserialize(value) {
      // 自定义反序列化逻辑
      return JSON.parse(value);
    }
  },
  beforeHydrate(context) {
    // 在恢复状态之前执行的逻辑
    console.log('Before hydrating:', context.store.id);
  },
  afterHydrate(context) {
    // 在恢复状态之后执行的逻辑
    console.log('After hydrating:', context.store.id);
  },
  pick: ['userInfo.name', 'userInfo.email'], // 只持久化 userInfo 下的 name 和 email 属性
  // omit: ['userInfo.password'], // 省略 userInfo 下的 password 属性（与 pick 互斥）
});

// ... 定义你的 store ...

export default pinia;

unplugin-vue-router 的基本使用

Sun, 29 Dec 2024 00:00:00 +0000

1. 前言

在Vue3开发过程中，每次创建新的页面都需要注册路由，需要在src/router.ts中新增页面的路径，并将URL路径映射到组件中，如下所示：

import { createMemoryHistory, createRouter } from 'vue-router'

import HomePageView from './HomePageView.vue'
import DevListView from './DevListView.vue'

const routes = [
  { path: '/', component: HomePageView },
  { path: '/DevListView', component: DevListView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

虽然看起来工作量不大，但如果页面特别多，就会感到繁琐。即使是微小的改动，如组件名的修改，也需要在路由文件中反复确认，反复如此就会感到不便。为了简化这部分工作，我想到了一个解决方案，那就是开发一个Vue3菜单路由生成工具，只需填写组件的中文名称，根据树形结构生成一个与routes结构相同的数组，然后替换使用即可。但还是觉得不够好，随后想到既然自己能发现这个问题，别人可能早已有了应对方案。接着，我就发现了 unplugin-vue-router 插件。

2. 配置

2.1 安装

npm install -D unplugin-vue-router

2.2 vite.config.ts

import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
})

2.3 tsconfig.json

{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler",
    // ...
  }
}

2.4 vite-env.d.ts

///

3. 应用

3.1 常规方式

因为项目布局是基于Element Plus组件库的搭建的，其中对进行了处理，是 Vue Router 的一个内置组件，用于渲染匹配当前路由的组件，如下所示：

<el-main>
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  router-view>
el-main>

所以，DevList.vue和DataList.vue组件都在中渲染显示，常规的组件文件结构，如下所示：

src/components/
├── Login.vue
├── Register.vue
├── Container.vue
└── DevManagement
    ├── DevList.vue
    └── DataList.vue

然后，在router.ts文件中是这样的：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/components/Login.vue';
import Register from '@/components/Register.vue';
import Container from '@/components/Container.vue';
import DevList from '@/components/DevManagement/DevList.vue';
import DataList from '@/components/DevManagement/DataList.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/',
    name: 'Container',
    component: Container,
    children: [
      {
        path: 'DevManagement/DevList',
        name: 'DevList',
        component: DevList
      },
      {
        path: 'DevManagement/DataList',
        name: 'DataList',
        component: DataList
      }
    ]
  }
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

3.2 使用unplugin-vue-router方式

需将src/components修改为src/pages，然后把登录页Login.vue重命名为index.vue，再创建一个Container文件夹和Container.vue相对应，这样就会自动识别DevList.vue和DataList.vue为Container.vue的子路由，其路由为/Container/DevManagement/DevList，如下所示：

src/pages/
├── index.vue
├── Register.vue
├── Container.vue
└── Container
    └── DevManagement
        ├── DevList.vue
        └── DataList.vue

在src/router.ts文件中配置如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})

// This will update routes at runtime without reloading the page
if (import.meta.hot) { 
  handleHotUpdate(router) 
}

如此一来，后续只需要在src/pages文件夹下按约定的规范处理即可，不需要在router.ts文件中进行修改了。

组态页面渲染器通过npm包方式使用页面没有渲染成功的问题

Fri, 20 Dec 2024 00:00:00 +0000

前言

在项目开发过程中，计划将组态页面的渲染器集成到组件库，以 npm 包的形式供后续项目模板复用。如此一来，倘若组态页面渲染出现问题，便能简化修复与迭代工作。

遇到问题

采用本地引入方式开发完成后，切换至 npm 包方式使用，此时面包屑可正常显示，然而组态页面部分却呈现空白状态。

分析问题

既然面包屑显示正常，那就表明通过向组件传入 Router 对象进行相关操作并无问题，毕竟面包屑与组态页面共同构成了项目中的具体功能页面。不可能 Router 有问题，面包屑却还能正常显示。
推测组件打包生成 npm 包后，自身未携带 Vue 环境，致使 Vue 内置特殊元素 <component> 渲染失败，此前使用 Pinia 时就碰到过类似情况。
那么，该如何在组件里创建 Vue 环境呢？
要是不使用 <component>，而改用渲染函数来实现会怎样呢？
markRaw 的作用是什么？
利用渲染函数实现后，发现打包成 npm 包使用时依旧出现空白，这就说明并非 <component> 的问题，如此一来，问题范围便缩小到组态页面的数据源上了。
对比本地引用和 npm 包两种方式下的数据请求差异，发现使用 npm 包时，存在接口未发起请求的情况，进而定位到问题根源。

问题原因

由于该渲染器是在项目中使用，其请求的 baseURL 是通过 window.location.origin 获取的。在本地引入使用时，本地开发服务器地址为 http://localhost:3000/，并且在 Vue 项目的 vite.config.ts 中已做代理，所以请求正常。但当把渲染器代码移至组件库并以 npm 包方式使用时，它自行获取的请求地址仍是 http://localhost:3000/，并未经过代理处理，致使请求资源的接口异常，最终造成页面空白。

const baseURL = import.meta.env.DEV ? "http://192.168.50.20" : window.location.origin

总结

解决 Bug 的思路仍有待提升，自己还是过于急于求成了。刚察觉到问题的一点苗头，就贸然行事、妄下结论，实在有些武断。一开始认定是 <component> 的问题，就应当采用排除法，不该如此笃定。实际上，只需用简单示例测试一下，便能排除该选项，也不至于耗费大量精力深入研究如何在组件里创建 Vue 环境？如何用渲染函数实现组件？平白浪费了许多时间。

每次解决完一个 Bug 之后都会觉得，这个算啥问题，真的不值一提。可在解决过程中，却常常感到无奈，好几次都差点放弃。原本代码放在项目中使用正常，非要解耦，感觉像是没事找事。不过，最终还是坚持了下来，觉得应该差不多能弄清楚问题所在了。虽说花费的时间不太划算，就如同这篇文章写得好似没什么价值一般，但总结一下解决 Bug 的心路历程，相信还是会有所收获的。积累到一定程度，便能为自己提供更多面对问题时的视角与启发。

Web应用实现在手机端访问和使用方案

Fri, 01 Nov 2024 00:00:00 +0000

1. 背景

当前的后台管理系统主要负责云平台和云服务器的管理，并且是以Web应用的形式在使用。但是，当出现服务器紧急情况或需要进行平台注册审核时，如果这些任务发生在非工作时间，例如在通勤路上，我们就无法使用PC浏览器进行访问和操作，这显然是不方便的。另外，由于后台管理系统仅供内部人员使用，我们只需要它能满足基本的查看和配置需求，对于便利性和美观性并没有太高要求。因此，将Web端的所有功能移植到手机端并开发一个App，显然很不划算。毕竟，每当Web端功能迭代时，App端也需要同步更新，这意味着同一功能需要实现两次，所以，开发App的方案就不考虑了。

2. 方案

2.1 方案一：使用手机Edge、Firefox浏览器访问使用【推荐】

使用手机通过Edge或Firefox浏览器访问时，设置为“查看桌面网站”（Firefox中称为桌面版网站开关），即可浏览平台的完整布局，并通过手势放大和缩小来居中展示所需内容，操作便捷。
可将后台管理系统的管理平台添加到手机主屏幕，实现快速访问。
以TDesign页面模板演示效果。

2.2 方案二：当前页面 + 全屏

创建一个专为手机端使用的手机端菜单，仅显示关注页面，手机端访问时读取该菜单显示。
利用@media媒体查询调整各页面布局，例如筛选条件等，以避免布局错乱。
默认情况下，只能在手机横屏模式下使用，提供一个全屏按钮，点击后将当前页面全屏化，以争取更多展示空间。

2.3 方案三：远程软件控制电脑访问使用

使用远程软件（如向日葵）访问电脑，然后在手机端通过手势放大和缩小进行操作。效果与方案一相似，但存在以下不足：

输入时需要手动打开键盘。
页面有滚动条时操作繁琐。
连接可能不稳定，画质不佳。

3. 结论

方案一无需额外开发成本，只需在指定手机浏览器上使用即可。
方案二需要额外开发，且最终呈现效果可能不如方案一。
方案三存在上述提到的缺点。
综合考虑，推荐采用方案一。

VuePress文档初始化请求过多问题探讨

Thu, 31 Oct 2024 00:00:00 +0000

1. 背景

公司有部门使用VuePress 1.0搭建平台的帮助文档，前期文档不是很多，所以没有暴露出特别明显的问题。但随着文档的逐步迭代和内容的增多，出现了大量的并发请求，总共有218个请求，导致服务器带宽耗尽、响应速度下降，进而影响了文档的使用。

2. 问题分析

VuePress 1.0是基于Vue 2和webpack实现的，其模块化方式使用的是CommonJS。这意味着，当项目打包部署在服务器并进行访问时，需要将源码全部加载完成后才能进行渲染，即同步加载。随着项目持续迭代，内容增多，性能问题逐渐显现。

3. 解决方案

考虑到向服务器发起了200多个请求，但查看那些.js文件，整个js文件夹大小才10.3MB，是否可以将10.3MB分为10个.js文件，减少请求至10次呢？

3.1 方案一：替换成showDoc

使用showDoc在线文档系统，相比vuepress基于vue.js的静态站点生成器，除了操作便利，对于解决并发请求200次这个问题，还是有帮助的，毕竟showDoc初始化的时候，是从服务器获取文档目录，再通过文档ID，去请求文档详情，通常来说，不会有那么多文档目录，不太可能出现并发请求200次这个问题，只是将vuepress迁移至showDoc，花费的成本很高，文档格式需要调整，图片需要上传，想想这个工作量就头大，再者，作为平台的帮助文档，本身带有宣传的作用，很难醒目地在showDoc中体现平台的公司名和Logo，所以这个方案不推荐。

3.2 方案二：研究webpack如何合并打包

如果请求过多是因为文件太分散导致的，那么，能够在当前基础上，也就是webpack里，找到，当打包时，将各个文件合并，减少请求次数呢？

VuePress 1.0 支持通过 webpack-chain 链式操作来修改内部的 webpack 配置，如下所示：

module.exports = {
  chainWebpack (config, isServer) {
    // config 是一个 ChainableConfig 的实例
  }
}

那在 webpack 中，如何对打包的体积、文件等进行处理呢？在 webpack 官方文档中，有推荐使用 SplitChunksPlugin 插件，是为了代码分割，减少包的体积，然后优化加载效率，感觉和自己的初衷背道而驰，最终没达到自己想要的效果。还有就是研究了下 ModuleConcatenationPlugin 插件，其作用是将所有模块的作用域“提升”或合并到一个闭包中，从而使得代码在浏览器中执行速度更快。但是因为要在使用 webpack-chain 去调研 webpack 的配置，尝试使用后也没达到预期，加上再花精力投入到 VuePress 1.0 和 webpack-chain 感觉有点不值。所以，就再想想其他方案。

3.3 方案三：替换成VitePress【推荐】

说到减少并发请求次数，实际上，Vite就在做这样的工作。Vite采用的JavaScript模块化方式是ESM（ECMAScript Modules）。与CommonJS相比，ESM支持按需加载，并且是异步执行的，不会阻塞浏览器的其他事件处理。这意味着在首次加载时，我们无需加载所有资源，仅需加载首页所需的资源即可。这样就能减少了并发请求次数，解决当前遇到的问题。

而VitePress，正是基于Vue 3和Vite构建的。

5. 方案验证

以下是两个文档框架的对比，内容基本为空，可忽略不计。可以看到VuePress 1.0初始化请求的就有26个请求，大部分都是.js文件，而VitePress 1.0只有9个请求，.js文件的请求才4个。

5.1 VuePress 1.0

5.2 VitePress 1.0

App开发Flutter支持Harmony OS Next方案

Wed, 30 Oct 2024 00:00:00 +0000

1. 背景

由于当前部门使用Flutter框架进行开发，支持生成Android和iOS两端的App应用。现在鸿蒙系统计划完全去掉AOSP核心代码，将无法支持Android应用。因此，鸿蒙手机接下来只能安装鸿蒙App应用。鉴于此，从长远来看，部门App后续也需要支持鸿蒙系统。那么，如何从成本和可维护性方面考虑后续的开发模式？可以兼顾到Android、iOS和鸿蒙系统，同时老项目又能支持在鸿蒙手机上运行？重新开发鸿蒙版本？显然不切实际。

2. 解决方案

2.1 方案一：Flutter for OpenHarmony

https://gitee.com/openharmony-sig/flutter_flutter

鸿蒙官方计划对Flutter进行反向适配，即基于Flutter SDK的稳定版本进行拓展，使其能够在鸿蒙DevEco Studio上构建和生成鸿蒙App应用。

2.1.1 优势

官方支持。
Flutter源码直接可用，只需简单适配，成本低。

2.1.2 劣势

因使用Flutter版本为3.7，与当前最新3.24版本相差过大，加上Flutter迭代特别频繁，很多开发方式、组件都在不断变化，后续要使用新的Flutter特性，可能不会那么容易。
Flutter正在考虑使用自研的图形渲染引擎Impeller替换掉Skia，这无疑又加大了更多的变数。最后，可能会变成多个分支进行维护。
部门已有项目，使用的Flutter版本都是最新的，可能是没办法兼容的。除非新项目统一使用这个3.7版本的Flutter SDK来开发。

2.2 方案二：ArkUI-X 跨平台框架

https://gitee.com/arkui-x

ArkUI-X扩展ArkUI开发框架到多个OS平台，让开发者基于一套主代码，就可以构建支持多平台的精美、高性能应用。目前支持OpenHarmony、HarmonyOS、Android、iOS，后续会逐步增加更多平台支持，可以简单理解为鸿蒙版的Flutter。

2.2.1 优势

官方支持。
鸿蒙版的Flutter。

2.2.2 劣势

有学习成本，虽然鸿蒙和Flutter是有一些共性的，学习成本相比之下不会太高，但是毕竟是新的开发模式，各种各样的知识和问题都是需要积累和时间的。
有开发成本，已有的Flutter项目需要重新开发。
生态各方面还处于初期，还未成熟和完善，也不适合立马接入商业项目应用。

2.3 方案三：Flutter Web【推荐】

http://192.168.24.10/appweb/index.html

通过Flutter Web可以部署在网页上，然后在手机浏览器上使用，并设置为全屏，则可以达到和App一样的使用效果。

2.3.1 优势

无开发成本。
使用时无需安装。
与系统无关，只要有浏览器就可使用。

2.3.2 劣势

需要说服使用鸿蒙手机的客户接受这种使用方式。
各手机浏览器需要支持全屏功能，不过可以代码实现，检测到当前是手机访问，则自动全屏即可。
考虑到毕竟是在网页上使用，体验可能不如App，但是现在手机性能、网络访问各方面发展都很不错，这方面应该不会特别明显。
不联网的项目怎么办？可以基于鸿蒙开发一个基于WebView的简单手机浏览器，并加载本地Flutter Web部署的包，打开这个应用就可访问。
额外多一些适配的工作，但不会很多，Flutter项目开发，需同时考虑兼容Web端。

2.4 方案四：Flutter 官方支持 HarmonyOS

Flutter官方暂没有支持HarmonyOS的计划，但是这个问答《HarmonyOS Support》毕竟是几年前了，以后的发展并不好说，如果鸿蒙系统大规模发展起来，发展到可以倒逼Flutter官方支持也不是没有可能。

3. 结论

到底选哪个方案，不是绝对的，只能是阶段性的，因为很多方案都还存在变数。考虑到部门的App项目情况，推荐选择【方案三】，但是方案一、方案二可以在后续进行这方面的调研和准备工作，伺机而动。

Vue3 + Vite + TypeScript + Bootstrap5 开发指南

Fri, 09 Jun 2023 00:00:00 +0000

2025 年 Web 响应式开发解决方案（基于 Vue3 生态）

随着移动设备碎片化加剧和跨端需求增长，2025 年的响应式开发已从单纯的 “适配多屏幕” 升级为 “全场景体验一致性”。结合当前技术演进，针对 PC、平板、手机多端适配需求，推荐以下增强方案：

一、核心技术栈升级

1. 基础框架：Vue 3 + Vite 6 + TypeScript 5

Vite 6 优势：新增的responsive-plugin可自动识别设备类型并注入环境变量，配合import.meta.env.DEVICE_TYPE在编译时优化条件渲染
TypeScript 5：借助const type特性强化响应式断点类型定义，避免运行时类型错误

// 设备类型类型定义示例
type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'large-screen'
const deviceType: DeviceType = import.meta.env.DEVICE_TYPE as DeviceType

2. 响应式引擎：Tailwind CSS 4 + Bootstrap 6 混合方案

Tailwind CSS 4：通过@container查询实现组件级响应式，比传统@media更精准控制元素布局
Bootstrap 6：新增responsive-propsAPI，支持在组件上直接声明多端样式

3. 跨端状态管理：Pinia + 设备传感器 API

利用Pinia存储设备状态（如屏幕方向、分辨率），结合ScreenOrientationAPI 实现动态适配

// 设备状态Store示例
import { defineStore } from 'pinia'

export const useDeviceStore = defineStore('device', {
  state: () => ({
    orientation: ScreenOrientation?.type || 'portrait-primary',
    breakpoint: 'mobile'
  }),
  actions: {
    init() {
      window.addEventListener('orientationchange', () => {
        this.orientation = ScreenOrientation.type
      })
    }
  }
})

二、组件层优化方案

1. 自适应布局组件库：PrimeVue 4 + VueUse

PrimeVue 4：所有组件默认支持responsive属性，内置 30 + 种设备预设
VueUse：使用useMediaQuery组合式 API 实现组件级响应式逻辑

2. 响应式数据处理：VueQuery + 设备感知数据请求

根据设备性能动态调整数据粒度，移动端请求精简数据减少流量消耗

// 设备感知数据请求示例
useQuery(['dashboard-data', deviceType], () => {
  return fetchDashboardData({
    detailLevel: deviceType === 'mobile' ? 'basic' : 'full'
  })
})

三、性能优化策略

1. 渲染优化：组件级代码分割

借助 Vite 6 的deviceConditionalImport功能，实现设备专属组件的按需加载

2. 图像适配：NextGen Image + WebP 2

使用标签配合srcset实现不同设备加载对应分辨率图像
采用 WebP 2 格式减少 50% 图像体积，配合loading=“lazy"实现按需加载

四、测试与调试方案

1. 多设备同步测试：BrowserStack 2025 + Vitest

利用 BrowserStack 的实时同步功能，在 20 + 设备上同时预览效果
使用 Vitest 的device-simulator模拟不同设备环境进行单元测试

2. 性能监控：Lighthouse Mobile + Web Vitals

重点监控移动设备的 LCP（最大内容绘制）和 CLS（累积布局偏移）
配置 CI/CD 流程，移动端性能得分低于 80 分自动阻断发布

五、方案对比与选择建议

方案	优势场景	学习成本	性能表现
传统 Bootstrap	快速原型开发	低	中
Tailwind 纯 CSS	高度定制化 UI	中	高
混合方案（推荐）	复杂多端应用	中高	高
组件库驱动	企业级后台系统	低	中高

决策建议：

简单应用：选择 Tailwind CSS 4 + VueUse 组合
复杂企业应用：采用混合方案 + PrimeVue 组件库
极致性能要求：增加 Vite 设备级代码分割和图像优化策略

通过上述方案，可在 2025 年的技术环境下实现 “一次开发，全端适配”，同时兼顾性能和开发效率。核心思路是将响应式逻辑从 CSS 层提升到组件层和应用层，结合编译时优化和设备感知能力，构建真正适配未来多端环境的 Web 应用。

前言

因为之前只是用Vue来开发IaaS平台项目，其使用场景通常都是PC，所以没怎么涉及到Web响应式设计开发相关知识。最近项目刚好是应用在PC和平板，甚至是手机上的，所以就需要考虑响应式的问题。

1. 技术选型

Web响应式开发，主要是基于CSS里@media媒体查询实现，允许不同视图尺寸使用不同的布局。

1.1 方案一：Vue 3 + Vite + Bootstrap5

1.1.1 优点

容易上手：只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
响应式设计：Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
移动优先：在 Bootstrap 中，自适应移动端是框架的核心部分。
浏览器兼容性：Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。
github 星数 164k
Bootstrap5 效果演示：https://www.bootstrap-admin.top/

1.1.2 缺点

没办法使用我们积累的vue next组件库
Bootstrap5 需要学习成本，但不会很难
相对紧急的项目，通常不应该引入新技术去开发实现，而是以快速交付为主。

1.2 方案二：Vue 3 + Vite + Element Plus + @media

1.2.1 优点

基于前端现有技术积累，可快速开发项目功能

1.2.2 缺点

前端封装组件库，并没考虑过响应式设计，潜在未知样式问题，如开发此项目，各组件需考虑各平台（电脑、平板、手机）屏幕适配的同时，还要考虑已引用该库开发的项目兼容性问题。
@media媒体查询需每个页面、每个平台去适配（Bootstrap5做的事情），工作量相对较大，因无更多平台设备去验证，潜在未知的样式问题。

1.3 结论

简单来说，可以理解为方案一Bootstrap5帮我们处理好了屏幕适配的问题，我们只需要关注功能开发即可，方案二则是功能也要开发，样式也要关注。长远来看，倾向于方案一开发。

2. 快速搭建

Bootstrap5官方文档有提供Vite基于开发的指南《Bootstrap & Vite》，我们虽然是基于Vue3开发的，但是相关配置基本都一样的，只是有一点点差异而已。

2.1 下载

通过Vite直接生成基于Typescript开发的Vue3模版。

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

2.2 安装


npm install
// bootstrap5、popperjs
npm install --save bootstrap @popperjs/core
// sass
npm install --save-dev sass
// bootstrap-icons 官方图标库
npm install bootstrap-icons

2.3 配置

2.3.1 开发热重载

在vite.config.ts中配置，我们需要让Vite知道在哪里可以找到我们项目的TypeScript，以及开发服务器应该如何表现(热重载从src文件夹中拉取)。

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      root: path.resolve(__dirname, 'src'),
    }
  },
  server: {
    port: 8080,
    host: true
  }
})

2.3.2 Bootstrap5

在vite.config.ts中配置，让导入变得尽可能简单：

 resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  }

在src/assets/style文件夹新建一个文件bootstrap5.scss ，引入bootstrap5样式：
```
@import "~bootstrap/scss/bootstrap";
```
将main.ts文件修改为main.js，然后在index.html中同步修改：
```
<script type="module" src="/src/main.js">script>
```

在main.js中引入bootstrap5：

// 自定义样式
import '../src/assets/style/bootstrap5.scss'

// Bootstrap5 JS
import * as bootstrap from 'bootstrap'

2.3 验证

  <div class="container mt-3">
    <h2 class="my-3 text-start">按钮样式h2>
    <button type="button" class="btn">基本按钮button>
    <button type="button" class="btn btn-primary ms-2">主要按钮button>
    <button type="button" class="btn btn-secondary ms-2">次要按钮button>
    <button type="button" class="btn btn-success ms-2">成功button>
    <button type="button" class="btn btn-info ms-2">信息button>
    <button type="button" class="btn btn-warning ms-2">警告button>
    <button type="button" class="btn btn-danger ms-2">危险button>
    <button type="button" class="btn btn-dark ms-2">黑色button>
    <button type="button" class="btn btn-light ms-2">浅色button>
    <button type="button" class="btn btn-link ms-2">链接button>
  div>

2.4 效果

3. 组件

3.1 日期选择器

一开始打算使用实现的，但是效果不是很理想，一些样式调整起来很复杂，加上本着不重复造轮子的思想，就打算引用相关日期插件实现。

安装

npm install @popperjs/core @eonasdan/tempus-dominus

main.js中引入样式

// 日期组件样式
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.css'

在.vue中使用时，需引入

import { TempusDominus} from '@eonasdan/tempus-dominus';
import {  name } from "@eonasdan/tempus-dominus/dist/locales/ru";

实现代码

<div class="input-group mb-3" id="datetimepicker1">
    <input type="text" class="form-control" readonly aria-label="">
    <span class="input-group-text"><i class="bi bi-calendar">i>span>
div>
    
onMounted(() => {
    const element: any = document.getElementById('datetimepicker1')
    var datetimepicker1 = new TempusDominus(element, {
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
            hourCycle: 'h24'
        },
        display: {
            viewMode: 'calendar',
            components: {
                year: true,
                month: true,
                date: true,
                clock: true,
                hours: true,
                minutes: true,
                seconds: true
            },
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    datetimepicker1.locale(name);
})

效果如下

3.2 自定义主题色

因为Bootstrap5主题默认是蓝色，和项目设计的主题色不一致，所以就需要修改定制主题色，这一块在官网Sass模块也有详细说明。特别注意的是，同一Sass文件中的变量覆盖可以在默认变量之前或之后。但是，当跨Sass文件覆盖时，必须在导入Bootstrap的Sass文件之前进行覆盖。比如要将主题色修改为紫色（#6610f2），就需要在我们自定义的样式文件bootstrap5.scss中设置，如下所示：

$primary: #6610f2;
$danger: #ff4136;

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

// scss
@import "~bootstrap/scss/bootstrap";
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

效果如下图所示，可以看到按钮设置为primary时，颜色已经变成紫色（#6610f2）了，但是出现了一个问题，那就是次要按钮、成功、信息等按钮样式异常。

为了解决这个问题，就去查看下_variables.scss 文件，其中有一段样式代码：

// scss-docs-start theme-color-variables
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;

也就是我们在自定义样式中覆盖了，导致相关字段颜色值丢失，所以就在自定义样式文件中，补上，如下所示：


// 修改主题色
$primary: #6610f2;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark,
);

效果如下所示，虽然解决了按钮的样式问题，但是其他组件其实可能有潜在的问题，这一块后续再补充。

3.3 Echarts

3.3.1 安装

npm install echarts --save

3.3.2 引入 ECharts

因为Echarts官网上面其实都有Demo的，但是结合我们实际项目，还是可以把相对贴切的模版给出来的，如下所示：


<template>
  <div class="card">
    <div id="echarts" style="width: 500px; height: 300px;">div>
  div>
template>
<script setup lang="ts">

import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const element: any = document.getElementById('echarts')
  const myChart: any = echarts.init(element);
  const colors = ['#5470C6', '#91CC75', '#EE6666'];
  const options = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '30%'
    },
    legend: {
      data: ['电压', '电流', '功率']
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        // prettier-ignore
        data: ['06:00:00', '07:00:00', '08:00:00', '09:00:00', '10:00:00', '12:00:00', '14:10:00', '15:30:00', '16:00:00', '17:00:00', '18:00:00', '19:00:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '电压',
        position: 'left',
        alignTicks: true,
        offset: 0,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          formatter: '{value} V'
        }
      },
      {
        type: 'value',
        name: '电流',
        position: 'left',
        alignTicks: true,
        offset: 50,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1]
          }
        },
        axisLabel: {
          formatter: '{value} A'
        }
      },
      {
        type: 'value',
        name: '功率',
        position: 'left',
        alignTicks: true,
        offset: 100,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[2]
          }
        },
        axisLabel: {
          formatter: '{value} KW'
        }
      }
    ],
    series: [
      {
        name: '电压',
        type: 'line',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: '电流',
        type: 'line',
        yAxisIndex: 1,
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: '功率',
        type: 'line',
        yAxisIndex: 2,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
  // 绘制图表
  myChart.setOption(options);
})


script>

<style scoped>
style>

3.3.2 屏幕自适应

因为使用Bootstrap5开发本身就是为了Web响应式功能，所以Echarts也需要处理屏幕自适应的问题，这个ECharts官方文档已经有相关说明了《响应容器大小的变化》，如下所示：

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
style>
<div id="main">div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
script>

3.3.3 热更新

待解决。

4. 打包

4.1 本地打开

因为项目应用场景不太一样，所以有些时候是想要直接打开dist/index.html就可以看到网页内容的，实现这个有现成的插件可以使用vite-plugin-singlefile，其原理就是将js和css文件内容填充到index.html里，这样就可以通过打开index.html查看打包好的项目了。如下所示：

安装

npm install vite-plugin-singlefile --save-dev

在vite.config.ts中配置

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
	plugins: [vue(), viteSingleFile()],
})

部门静态导航页的设计与实现

Sat, 11 Feb 2023 00:00:00 +0000

前言

每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。

1. 遇到问题

static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。

2. 解决方案

考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus 实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示：

功能主要是以下几点，分别是：

左边菜单栏快速定位，右边静态导航页动态渲染
通过 navList.ts 配置，无需改动前端页面
支持百度开发者搜索

当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。

3. 技术要点

项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。

3.1 基于el-scrollbar实现左右联动定位到标题栏

项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当

上定义了name属性，就可以通过这个函数获取到它与顶部的距离offsetTop，以此可以将滚动条滚动到指定的位置，如下所示：

const handleSelect = (key: string, keyPath: string[]) => {
		let offsetTop = document.getElementsByName(key)[0].offsetTop
		scrollbarRef.value!.setScrollTop(offsetTop - 20)
}

3.2 实现左侧菜单栏最后几个菜单的标题置顶

在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。

首先，需要知道最后一个导航模块的名称，如下所示：

// 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度)
let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label

然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示：

const handleSelect = (key: string, keyPath: string[]) => {
   let offsetTop = document.getElementsByName(key)[0].offsetTop
   scrollbarRef.value!.setScrollTop(offsetTop - 20)
 }

总结

dst-static-nav 项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。

基于 VuePress 2.x 与 ElementPlus 的组件库文档搭建实践

Wed, 22 Dec 2021 00:00:00 +0000

1. 前言

计划使用 VuePress 2.x 结合 ElementPlus 实现一个封装组件库的文档说明网站。本文将详细介绍如何搭建环境、配置项目以及解决过程中遇到的问题。

2. Vuepress项目初始化

2.1 准备工作

创建一个名为 VuePressTest 的项目目录，然后进入该目录并安装依赖：

mkdir VuePressTest && cd VuePressTest
npm init -y
npm install -D vuepress@next
npm install

2.2 配置

在项目根目录下的 package.json 文件中添加以下脚本：

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

2.3 示例

在项目根目录下创建 docs/README.md 文件，并添加以下内容：

---
home: true
heroImage: https://artice-code-1258339218.cos.ap-beijing.myqcloud.com/vuepress/element-index.png
heroText: Element
features:
- title: 一致性 Consistency
  details: 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
- title: 反馈 Feedback
  details: 通过界面样式和交互动效让用户可以清晰的感知自己的操作
- title: 效率 Efficiency
  details: 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
footer: by饿了么
---

运行 npm run dev 命令后，效果如下：

3. 使用Element-Plus

3.1 安装

npm install element-plus --save

3.2 配置

在 .vuepress 目录下创建 clientAppEnhance.ts 文件，引入 ElementPlus：

import { defineClientAppEnhance } from '@vuepress/client'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineClientAppEnhance(({ app, router, siteData }) => {
    app.use(ElementPlus)
})

3.3 示例

修改 docs/README.md 文件，添加一个 ElementPlus 按钮组件：

---
home: true
---
<el-button type="primary" :icon="Edit">我是Element-Plusel-button>

运行项目后，效果如下：

3.4 Webpack 下的 .mjs 文件报错处理

当前项目使用 Vite 打包工具可以正常启动，但如果使用 Webpack 打包，运行 npm run dev 时可能会出现与 ElementPlus 相关的报错，错误信息如下：

(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*. mjs' file, or a '*.js' file where the package. json contains '"type": "module"'). 
The extension in the request is mandatory for it to be fully specified. 
Add the extension to the request.

根据 Webpack 官方文档的解释，需要将 Rule.resolve.fullySpecified 选项设置为 false 来解决这个问题。在 config.ts 文件中添加以下配置：

import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions } from 'vuepress'

export default defineUserConfig<DefaultThemeOptions>({
  bundler: '@vuepress/webpack', // 指定使用 Webpack 打包
  bundlerConfig: {
    chainWebpack: (config, isServer, isBuild) => {
      config.module
        .rule('mjs')
        .test(/\.m?jsx?$/)
        .resolve.set('fullySpecified', false)
    }
  }
})

3.5 ElementPlus 组件图标显示

在前面的按钮示例中，设置 :icon="Edit" 图标并未生效，这是因为 ElementPlus 的图标需要单独引入。

首先安装图标库：

npm install @element-plus/icons-vue

然后修改 .vuepress/clientAppEnhance.ts 文件，注册所有图标组件：

import { defineClientAppEnhance } from '@vuepress/client'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.use(ElementPlus)
  
  // 全局注册 ElementPlus 图标组件
  Object.keys(ElIcons).forEach(key => {
    app.component(key, ElIcons[key])
  })
})

修改按钮示例，使用已注册的图标：

---
home: true
---

<el-button type="primary" icon="Edit">带图标的按钮el-button>

添加图标后的效果如下：

4. Markdown 中使用 Vue

如果要对自己封装的组件进行说明，最好能像 ElementPlus 文档那样，既有组件示例，又能查看源码。VuePress 支持在 Markdown 文件中直接使用 Vue 组件。

4.1 自定义组件

在 .vuepress 目录下创建 components 文件夹，然后在其中创建 Test.vue 组件：

<template>
  <div class="test-component">
    <h1>在 Markdown 中引入自定义组件h1>
    <el-button type="success">这是一个 ElementPlus 按钮el-button>
  div>
template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // 组件逻辑
    return {}
  }
})
script>

<style lang="less" scoped>
.test-component {
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  margin: 20px 0;
}
style>

4.2 自动注册 Vue 组件

安装组件自动注册插件：

npm i -D @vuepress/plugin-register-components@next

在 config.ts 中配置插件：

import { defineUserConfig } from 'vuepress'
import type { DefaultThemeOptions } from 'vuepress'
import { path } from '@vuepress/utils'

export default defineUserConfig<DefaultThemeOptions>({
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: path.resolve(__dirname, './components'),
      },
    ],
  ],
})

4.3 基本使用

在 docs/README.md 文件中引入自定义组件：

---
home: true
---

<Test />

引入组件后的效果如下：

展厅3D项目实现方案

Tue, 28 Feb 2017 00:00:00 +0000

凯撒密码

凯撒密码作为一种最为古老的**对称加密体制，通过把字母移动一定的位数来实现加密和解密。**明文中的所有字母都在字母表上向后（或向前）按照一个固定数目进行偏移后被替换成密文。例如，当偏移量是3的时候，所有的字母A将被替换成D，B变成E，因此，位数就是凯撒密码加密和解密的密匙。

凯撒密码的简单demo实现

public class Caesar {
    public static void main(String[] args) {
        //需要加密的数据
        String enc = "bravewh";
        //需要解密的数据
        String dec = "eudyhzk";
        //密匙，即偏移量
        int key = 3;
        //举例，用来验证统计字符串出各字符出现的字数
        String str = "asdasgasdasdad  adawdawd1112212ad";
        //打印
        System.out.println("加密后："+encrypt(enc, 3));
        System.out.println("解密后："+decrypt(dec, 3));
    }

    //加密方法
    public static String encrypt(String enc, int key) {
        //得到字符串里的每一个字符
        char[] array = enc.toCharArray();
        for (int i = 0; i < array.length; ++i) {
            //字符转换成 ASCII 码值
            int ascii = array[i];
            //字符偏移，例如 a->b
            ascii = ascii + key;
            //ASCII 码值转换为 char
            char newChar = (char) ascii;
            //替换原有字符
            array[i] = newChar;
            //以上 4 行代码可以简写为一行
            //array[i] = (char) (array[i] + key);
        }
        //字符数组转换成 String
        return new String(array);
    }

    //解密方法
    public static String decrypt(String input, int key) {
        //得到字符串里的每一个字符
        char[] array = input.toCharArray();
        for (int i = 0; i < array.length; ++i) {
            //字符转换成 ASCII 码值
            int ascii = array[i];
            //恢复字符偏移，例如 b->a
            ascii = ascii - key;
            //ASCII 码值转换为 char
            char newChar = (char) ascii;
            //替换原有字符
            array[i] = newChar;
            //以上 4 行代码可以简写为一行
            //array[i] = (char) (array[i] - key);
        }
        //字符数组转换成 String
        return new String(array);
    }

则此时，运行，打印结果为：

  加密后：eudyhzk
  解密后：bravewh

频率分析法（破解凯撒密码）

凯撒密码加密强度太低，只需要用频度分析法即可破解。
在任何一种书面语言中，不同的字母或字母组合出现的频率各不相同。而且，对于以这种语言书写的任意一段文本，都具有大致相同的特征字母分布。比如，在英语中，字母 E 出现的频率很高，而 X 则出现得较少。

破解流程

统计密文里出现次数最多的字符，例如出现次数最多的字符是是’h’。
计算字符’h’到’e’的偏移量，值为 3，则表示原文偏移了 3 个位置。
将密文所有字符恢复偏移 3 个位置。
注意点：
- 统计密文里出现次数最多的字符时，需多统计几个备选，因为最多的可能是空格或者其他字符，例如下图出现次数最多的字符’#’是空格加密后的字符，’h’才是’e’偏移后的值。
- 解密时要多几次尝试，因为不一定出现次数最多的字符就是我们想要的目标字符，如下图，第二次解密的结果才是正确的。

写一个方法，输入一串字符串，获取到出现次数最多的字符，并且知道多少次。用来推算出密匙，即偏移量。

public class Caesar {
    public static void main(String[] args) {
        //举例，用来验证统计字符串出各字符出现的字数
        String str = "asdasgasdasdad  adawdawd1112212ad";
        //输入一串字符串，获取到出现次数最多的字符，并且知道多少次。
        getCount(str);
    }

    private static void getCount(String str) {
        HashMap<String, Integer> hashMap = new HashMap<>();
        for (int i = 0; i < str.length(); i++) {
            String key = String.valueOf(str.charAt(i));
            if (!hashMap.containsKey(key)) {
                hashMap.put(key, 1);
            } else {
                int val = hashMap.get(key);
                hashMap.put(key, val + 1);
            }
        }
        //将HashMap.entrySet()转换成list
        ArrayList<HashMap.Entry<String, Integer>> list = new ArrayList<>(hashMap.entrySet());
        //然后通过比较器来实现排序
        Collections.sort(list, new Comparator<HashMap.Entry<String, Integer>>() {
            @Override
            public int compare(HashMap.Entry<String, Integer> e1, HashMap.Entry<String, Integer> e2) {
                return e2.getValue().compareTo(e1.getValue());
            }
        });
        for (Map.Entry<String, Integer> lis : list) {

            System.out.println("字符 " + lis.getKey() + " 出现了 " + lis.getValue() + " 次。");
        }
    }

则此时，运行，打印结果为：

字符 a 出现了 9 次。
字符 d 出现了 8 次。
字符 1 出现了 4 次。
字符 s 出现了 4 次。
字符 2 出现了 3 次。
字符   出现了 2 次。
字符 w 出现了 2 次。
字符 g 出现了 1 次。

中场休息，总结写博文时获取到的一些小知识

在Android Studio中，要运行main( ) 方法，只需要自定义一个类，然后在类里面写好main方法，就可以右键选择Run ‘xxxClass.main() ‘即可。
简书markdown语法里面强行换行方法就是加上< /br>，只因还不知怎么可以原样显示< /br>，而不是被markdown当成语法解析掉，所以在里面多了空格。而且首行缩进的方法是，通过 “ shift + 空格键 ” 将搜狗输入法变成圆角拼音，再按两次空格键即可。还有，水平分割线的语法是 *** 。

对称加密

对称加密

加密和解密都使用同一把秘钥，这种加密方法称为对称加密，也称为单密钥加密。**简单理解就是，加密解密都是同一把钥匙。

对称加密常用算法

DES —— 数据加密标准，是一种使用密钥加密的块算法。
3DES —— 三重数据加密算法，块密码的通称。它相当于是对每个数据块应用三次 DES 加密算法。
AES —— 在密码学中又称 Rijndael 加密法，是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的 DES，已经被多方分析且广为全世界所使用。