企业官网建设流程全解析

欢迎加入开源鸿蒙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精确算出金额 → 再用numeral格式化展示到页面

三、安装

npminstallnumeral

四、常用格式化示例

importnumeralfrom'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/MBnumeral(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'importAppfrom'./App.vue'importnumeralfrom'numeral'constapp=createApp(App)app.config.globalProperties.$numeral=numeral app.mount('#app')

组件内使用：

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

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

importnumeralfrom'numeral'// 人民币金额exportconstformatRMB=num=>{if(num===null||num===undefined)return'¥0.00'return`¥${numeral(num).format('0,0.00')}`}// 千分位数字无符号exportconstformatNum=num=>numeral(num).format('0,0')// 百分比exportconstformatPer=num=>numeral(num).format('0.00%')// 大数缩写exportconstformatShort=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）

importBigfrom'big.js'importnumeralfrom'numeral'// 1. big.js 精确计算：单价*数量constprice='39.9'constcount=3consttotal=newBig(price).times(count).toString()// "119.7"// 2. numeral 格式化展示constshowPrice=`¥${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处理成美观格式展示到页面。