hf-echarts

Project setup

安装依赖

$ npm run pre

开发

$ npm run dev

组件打包

$ npm run build

项目打包

$ npm run preview:example

说明

package.json文件scripts

{
  // 安装依赖
  "pre": "npm i && cd ./example && npm i",
  // 开发运行项目 (通过 concurrently 启动多个命令)
  "dev": "concurrently \"vue-docgen --watch\" \"npm run docs:dev\"",
  "serve": "npm run dev",
  // 组件打包
  "build": "vite build",
  // example项目安装依赖
  "example:pre": "pnpm i && cd ./example && pnpm i",
  // example项目运行
  "example:dev": "npm -C example run dev",
  // example项目打包
  "example:build:": "npm -C example run build && npm -C example run preview",
  // vuepress运行
  "docs:dev": "vuepress dev docs",
  // vuepress打包
  "docs:build": "vuepress build docs",
  // 根据core/components组件 生成docs/components/*.md文档
  "docgen": "vue-docgen"
}

目录结构

.
├── core                      组件库源代码
│   ├── components            组件
|   │   └── Button            按钮组件
|   |       ├── index.vue     按钮组件
|   |       └── Readme.vue    按钮组件文档，自定义示例(和.vue文件拆开)
|   ├── theme                 预置的主题
|   │   ├── vintage.json
|   │   └── ...
|   ├── index.js              入口文件
│   └── package.json          配置包名: hf-echarts
├── docs              组件库文档
|   ├── guide         指南
|   └── component     组件
|       ├── Button.md 自动生成的markdown组件说明文档
|       └── ...
└── example  示例项目，普通vue2工程

说明

• 组件库源码：./core/components
• 组件库文档：./docs/components (运行npm run dev时，自动生成 md 文件，修改组件代码，自动生成 md 文件)
• 示例项目：./example
• 安装本地包：npm i ./core，把 core 文件夹当做第三方库使用(不用每个 md 文件 import 组件，统一在enhanceApp.js导入使用)
• 后续若有需要添加的模块，直接在根目录添加文件夹，功能分开在不同目录，不会太复杂

和 HFGIS 区别

• 组件源代码目录不同
  • HFGIS：./src/components/xxx.vue
  • HfEcharts：./core/components/index.vue
  • 独立目录./core，便于在 vuepress、example 项目，使用 npm 方式导入包文件
• 示例代码位置不同
  • HFGIS：和组件相同文件，<docs>标签下
  • HfEcharts：组件同目录下，Readme.md文件
  • 不同功能模块拆分开来，也便于书写多个示例
• 开发阶段构建工具不同
  • HFGIS
    • 项目运行：rollup
    • 打包：rollup
    • 文档：vuepress webpack
  • HfEcharts
    • 项目运行：vite
    • 打包：vite（打包使用 rollup）
    • 文档：vuepress webpack
• 文档示例使用的插件不同
  • HFGIS：vuepress-plugin-demo-code
    • 问题：同一页面，多个示例，共用同一个vue实例...后面覆盖前面
  • HfEcharts：vuepress-plugin-demo-container
    • 同一页面可以书写多个示例，不会相互影响
    • 依旧在::: demo :::中书写代码示例，需要添加```把代码块包裹起来
    • 文档：Demo Container

参考

vite 搭建 vue2 项目 vite 库模式打包 vue 组件

问题记录

• pnpm 设置自动安装 peer 依赖
  • pnpm config set auto-install-peers true
  • pnpm 问题
• vuepress 运行失败
  • package.json 删除 "type": "module"