wenbao-website

wenbao-website

文保中心官网前端项目。

技术栈

前端核心技术

• 框架: Nuxt.js v4 (Vue 3 框架)
• 核心库: Vue 3, Vue Router
• 状态管理: Pinia
• 类型系统: TypeScript
• 样式预处理器: SCSS
• 构建工具: Vite
• UI 框架: Bootstrap
• UI 组件库: Ant Design Vue

项目目录组织

src/
  api/              # API 相关代码
  assets/           # 静态资源
    fonts/          # 字体文件
    images/         # 图片资源
    scss/           # SCSS 样式文件
  components/       # 通用组件
    content/        # 内容显示相关组件
    controls/       # 小组件
    display/        # 显示基础组件
    icons/          # 图标组件
  composeable/      # 组合式函数
  pages/            # 页面
    channel/        # 文章分类页面
    page/           # 文章详情页面
    inheritor/      # 传承人相关页面（由闽南文化项目迁移）
server/
  api/              # 服务器端 API
    ecms/           # CMS 相关 API
      article/      # 文章相关 API
      channel/      # 分类相关 API
  config/           # 服务器配置
  db/               # 数据库相关代码
  utils/            # 服务器工具函数
scripts/
  UpdateScript/     # 更新脚本

开发与构建

开发命令

# 启动开发服务器
npm run dev

# 启动 Nuxt 开发服务器
npm run nuxt-dev

构建命令

# 构建项目
npm run build

# 构建项目然后打包并推送线上
npm run updater update post web

# 预览构建结果
npm run nuxt-preview

推送至线上后请在宝塔面板中重启项目。

项目准备

# 安装依赖后执行的准备命令
npm run nuxt-postinstall