欢迎加入开源鸿蒙PC社区： https://harmonypc.csdn.net/
欢迎在PC社区平台申请新建项目：https://atomgit.com/OpenHarmonyPCDeveloper
AtomGit 仓库地址：https://atomgit.com/OpenHarmonyPCDeveloper/ohos_node_vue_ts

---

1. 环境搭建：

该文完整梳理了ARM64架构鸿蒙PC（HarmonyOS/OpenHarmony6.1及以上），基于CodeArts IDE搭建Vite+Vue前端项目的全流程与疑难解决方案。项目实操中，Vite启动会出现rolldown原生模块权限拒绝报错，根源是鸿蒙系统拦截未签名二进制文件，最终解决方案为引入ohos-signpost自动签名工具，配置npm后置钩子，在依赖安装完成后自动为所有.node文件添加系统合法签名，消除权限校验拦截，最终实现CodeArts IDE内Vue+TS项目正常启动、调试。

可以参考文章：
OpenHarmony 鸿蒙 PC + CodeArts IDE 前端 Vite+Vue 完整开发环境搭建指南:https://blog.csdn.net/wanmeijuhao/article/details/161925265

---

# numeral.js 完整讲解

一、numeral.js是什么

numeral（全称 numeral.js）是 npm 轻量级数字格式化展示库，专门把原始数字转换成人类易读格式：千分位金额、万元缩写、百分比、文件大小、货币符号等。

• 核心定位：只做展示格式化，不解决高精度运算（和 big.js 分工完全分开）
• 无依赖、API极简，后台报表、电商价格、统计大屏必备

二、和 big.js 核心区分

库	核心用途	适合场景
big.js	高精度加减乘除，解决 0.1+0.2 精度丢失	价格计算、订单总价、分账、财务运算
numeral	数字美化、格式化展示	页面渲染：¥1,234.56、1.2万、50%、20MB

业务标准搭配流程：
先用 big.js 精确算出金额 → 再用 numeral 格式化展示到页面

三、安装

npm install numeral

四、常用格式化示例

import numeral from 'numeral'

// 1. 千分位，保留2位小数（金额最常用）
numeral(12345.678).format('0,0.00') // "12,345.68"

// 2. 人民币货币格式
numeral(9999.9).format('$0,0.00') // "$9,999.90"
// 自定义人民币符号
`¥${numeral(1234).format('0,0.00')}` // ¥1,234.00

// 3. 大数缩写（万/百万 M）
numeral(1250000).format('0.0a') // "1.3m"
numeral(18000).format('0a') // "18k"

// 4. 百分比
numeral(0.785).format('0.00%') // "78.50%"

// 5. 文件大小 KB/MB
numeral(10240).format('0.0b') // "10MB"

// 6. 只取原始数字（反向解析）
numeral('12,345.67').value() // 12345.67

五、Vue3 script setup 完整示例

<template>
  <div>
    <h3>numeral 格式化演示</h3>
    <p>原始总价：{{ totalNum }}</p>
    <p>格式化金额：{{ formatPrice(totalNum) }}</p>
    <p>销量缩写：{{ formatCount(sales) }}</p>
    <p>转化率：{{ formatPercent(rate) }}</p>
  </div>
</template>

<script setup>
import numeral from 'numeral'

// 模拟big.js计算出的精确数值
const totalNum = 15689.72
const sales = 128600
const rate = 0.6732

// 封装金额格式化
const formatPrice = (num) => {
  return `¥${numeral(num).format('0,0.00')}`
}
// 销量缩写
const formatCount = (num) => {
  return numeral(num).format('0.0a')
}
// 百分比
const formatPercent = (num) => {
  return numeral(num).format('0.00%')
}
</script>

六、全局过滤器/全局工具（项目通用）

1. main.js 全局挂载

import { createApp } from 'vue'
import App from './App.vue'
import numeral from 'numeral'

const app = createApp(App)
app.config.globalProperties.$numeral = numeral
app.mount('#app')

组件内使用：

const { proxy } = getCurrentInstance()
const price = `¥${proxy.$numeral(19999).format('0,0.00')}`

2. 封装全局格式化工具 utils/format.js

import numeral from 'numeral'

// 人民币金额
export const formatRMB = num => {
  if (num === null || num === undefined) return '¥0.00'
  return `¥${numeral(num).format('0,0.00')}`
}
// 千分位数字无符号
export const formatNum = num => numeral(num).format('0,0')
// 百分比
export const formatPer = num => numeral(num).format('0.00%')
// 大数缩写
export const formatShort = num => numeral(num).format('0.0a')

七、关键注意事项

1. 不能用 numeral 做加减乘除
   它内部基于 JS 原生浮点数，numeral(0.1).add(0.2) 依然会出现精度误差，计算必须交给 big.js。
2. 格式化默认自动四舍五入，和金额展示需求匹配。
3. 解析带逗号、货币符号的字符串时，.value() 会自动清洗成纯数字：

   numeral('¥12,345.67').value() // 12345.67
   

4. 空值兼容：封装时提前判断 null/undefined，避免报错。

八、电商完整业务组合示例（big.js + numeral）

import Big from 'big.js'
import numeral from 'numeral'

// 1. big.js 精确计算：单价*数量
const price = '39.9'
const count = 3
const total = new Big(price).times(count).toString() // "119.7"

// 2. numeral 格式化展示
const showPrice = `¥${numeral(total).format('0,0.00')}`
console.log(showPrice) // ¥119.70

---

总结

同时给出ARM64架构OpenHarmony6.1及以上PC端开发方案：在CodeArts IDE搭建Vite+Vue+TS项目时，rolldown的.node原生文件会因未签名被系统拦截报错，通过ohos-signpost工具搭配npm钩子自动签名即可解决，附带完整搭建教程链接。

numeral.js 数字格式化库

1. 核心定位：轻量无依赖，仅负责数字页面美化展示，不处理高精度运算，常和big.js搭配使用（big.js计算、numeral.js格式化渲染）。
2. 与big.js分工
   big.js解决浮点数精度丢失，用于财务、订单价格运算；numeral.js做展示，支持千分位、人民币、百分比、大数缩写、文件大小等格式。
3. 基础用法
   安装后可实现金额、百分比、万级缩写、文件容量格式化，还能反向解析带符号、千分位的数字字符串。
4. Vue3落地方案
   组件局部引入、main.js全局挂载、封装统一格式化工具函数三种使用方式，提供完整演示代码。
5. 开发要点
   不可用于数值运算，会存在精度问题；格式化自动四舍五入；封装工具时做好空值判断防止报错。
6. 标准业务流程
   先用big.js完成精准金额计算，再通过numeral.js处理成美观格式展示到页面。