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:
- 示例代码位置不同
- HFGIS:和组件相同文件,
<docs>
标签下 - HfEcharts:组件同目录下,
Readme.md
文件 - 不同功能模块拆分开来,也便于书写多个示例
- HFGIS:和组件相同文件,
- 开发阶段构建工具不同
- HFGIS
- 项目运行:rollup
- 打包:rollup
- 文档:vuepress webpack
- HfEcharts
- 项目运行:vite
- 打包:vite(打包使用 rollup)
- 文档:vuepress webpack
- HFGIS
- 文档示例使用的插件不同
- HFGIS:
vuepress-plugin-demo-code
- 问题:同一页面,多个示例,共用同一个vue实例...后面覆盖前面
- HfEcharts:
vuepress-plugin-demo-container
- 同一页面可以书写多个示例,不会相互影响
- 依旧在
::: demo :::
中书写代码示例,需要添加```把代码块包裹起来 - 文档:Demo Container
- HFGIS:
参考
问题记录
- pnpm 设置自动安装 peer 依赖
pnpm config set auto-install-peers true
- pnpm 问题
- vuepress 运行失败
- package.json 删除
"type": "module"
- package.json 删除