欢迎加入开源鸿蒙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

---

2. moment是什么？

一款老牌 JavaScript 日期时间处理库，用来格式化、计算、解析时间。

基础用法示例

// 获取当前时间
const now = moment();
// 格式化输出
console.log(moment().format('YYYY-MM-DD HH:mm:ss'));
// 加减时间
moment().add(7, 'days'); // 7天后
moment().subtract(1, 'year'); // 一年前

安装moment

# npm
npm i moment

基础时间格式化、加减运算

<template>
  <div class="time-demo">
    <p>原始moment对象：{{ now }}</p>
    <p>标准格式：{{ formatNow }}</p>
    <p>7天前日期：{{ sevenDayAgo }}</p>
    <p>3天后日期：{{ threeDayLater }}</p>
  </div>
</template>

<script setup>
import moment from 'moment'

// 当前时间对象
const now = moment()
// 年月日时分秒
const formatNow = moment().format('YYYY-MM-DD HH:mm:ss')
// 往前7天
const sevenDayAgo = moment().subtract(7, 'days').format('YYYY-MM-DD')
// 往后3天
const threeDayLater = moment().add(3, 'days').format('YYYY-MM-DD')
</script>

时间戳、字符串互转、取区间边界

<script setup>
import moment from 'moment'

// 毫秒时间戳转日期
const ts = 1712345678000
const stampToDate = moment(ts).format('YYYY-MM-DD')

// 标准日期字符串格式化
const dateStr = '2026-01-01'
const strFormat = moment(dateStr).format('MM月DD日')

// 今日 00:00:00
const dayStart = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
// 今日 23:59:59
const dayEnd = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
// 当月第一天、当月最后一天
const monthStart = moment().startOf('month').format('YYYY-MM-DD')
const monthEnd = moment().endOf('month').format('YYYY-MM-DD')
</script>

计算两个时间差值

<script setup>
import moment from 'moment'

const startTime = moment('2026-01-01')
const endTime = moment()

const diffDays = endTime.diff(startTime, 'day')    // 相差天数
const diffHours = endTime.diff(startTime, 'hour')  // 相差小时
const diffMinutes = endTime.diff(startTime, 'minute')
</script>

main.ts / main.js

import { createApp } from 'vue'
import App from './App.vue'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

const app = createApp(App)
// 挂载全局属性
app.config.globalProperties.$moment = moment
app.mount('#app')

页面使用全局$moment

<template>
  <p>{{ $moment().format('YYYY年MM月DD日 dddd') }}</p>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const today = proxy.$moment().format('YYYY-MM-DD')
</script>

中文本地化（显示中文星期、月份）

单独引入中文语言包，不引入默认英文：

<script setup>
import moment from 'moment'
// 引入中文语言包
import 'moment/locale/zh-cn'
// 全局设置中文
moment.locale('zh-cn')

// 输出：2026年06月16日 星期二
console.log(moment().format('YYYY年MM月DD日 dddd'))
</script>

搭配 Element Plus 日期组件

<template>
  <!-- value-format="timestamp" 绑定时间戳 -->
  <el-date-picker
    v-model="selectDate"
    value-format="timestamp"
    placeholder="选择日期"
  />
</template>

<script setup>
import { ref } from 'vue'
import moment from 'moment'
// 默认赋值当前时间戳
const selectDate = ref(moment().valueOf())
</script>

1. 操作原对象会改变原值：

// moment 坑：会修改now本身
const now = moment()
const before7 = now.subtract(7, 'day') 
// 解决：先克隆
const before7 = moment(now).subtract(7, 'day')

2. 语言包必须单独引入，否则星期永远英文；
3. Vue3 <script setup> 无法直接使用 this.$moment，必须通过 getCurrentInstance 获取proxy；
4. 时间戳传参注意区分秒/毫秒，Moment自动识别13位毫秒时间戳。

[PARSE_ERROR] Identifier `now` has already been declared
    ╭─[ virtual-module:/storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/src/components/HelloWorld.vue?id=0:14:7 ]
    │
 14 │ const now = moment()
    │ ─┬─  
    │ ╰─── `now` has already been declared here
    │ 
 45 │ const now = dayjs()
    │ ─┬─  
    │ ╰─── It can not be redeclared here
────╯

    at aggregateBindingErrorsIntoJsError (file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/rolldown/dist/shared/error-BuvQYXuZ.mjs:48:18)
    at unwrapBindingResult (file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/rolldown/dist/shared/error-BuvQYXuZ.mjs:18:128)
    at scan (file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/rolldown/dist/experimental-index.mjs:181:3)
    at async Object.build (file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/vite/dist/node/chunks/node.js:30943:3)
    at async scan (file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/vite/dist/node/chunks/node.js:30887:4)
    at async file:///storage/Users/currentUser/workspace/code/pythonCode/demo/vite-project/node_modules/vite/dist/node/chunks/node.js:23353:15

---

总结

鸿蒙PC（ARM64 OpenHarmony6.1+）Vite+Vue开发环境搭建

1. 适用平台：ARM64架构鸿蒙PC、OpenHarmony6.1及以上，使用CodeArts IDE开发Vite+Vue3+TS项目；
2. 核心报错：Vite启动时rolldown原生.node模块报权限拒绝，根源是鸿蒙系统拦截未签名二进制文件；
3. 解决方案：接入ohos-signpost自动签名工具，配置npm后置钩子，安装依赖后自动给所有.node文件签名，绕过系统权限拦截，实现正常启动与调试；
4. 参考资料：CSDN完整搭建教程。

Moment.js 时间库 Vue3 全套使用教程

1. 基础介绍

老牌JS日期处理库，支持时间格式化、时间运算、时间戳/字符串互转、时间差计算；已停止维护，新项目推荐dayjs替代。

2. 基础使用

• 安装：npm i moment；
• 局部引入：页面单独import，实现当前时间格式化、7天前/3天后日期计算；
• 时间转换：毫秒时间戳、日期字符串互相格式化；快速获取当日零点/23点59分、当月首尾日期；
• 差值计算：可算出两个时间间隔的天数、小时、分钟。

3. 全局挂载与中文适配

1. 在main.ts全局引入moment、中文语言包并设置全局中文，挂载到全局属性$moment；
2. script setup内需通过getCurrentInstance().proxy调用全局moment；
3. 必须单独引入zh-cn语言包，否则月份、星期显示英文。