0.0.1 • Published 1 year ago

ndp-cm-tem-vue2 v0.0.1

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
1 year ago

✨工程介绍 ✨环境要求 ✨编辑器要求 ✨组件工程目录 ✨组件工程命令介绍 ✨组件工程配置文件修改 ✨使用步骤 ✨创建组件 ✨组件编码 ✨组件第三方依赖使用 ✨组件静态资源使用 ✨组件皮肤系统使用 ✨组件文档编写 ✨组件预览工程使用 ✨组件工程代码提交 ✨组件工程代码发布 

🚀此工程为VUE2技术栈下的组件构建工程。组件开发人员可在此工程内进行组件包封装，发布。
🔔nodejs ------------------------------------------------- v16.13.0 < > v18.0.0
🔔pnpm --------------------------------------------------- v6.35.1
🔔webpack ------------------------------------------------ v4.46.0
🧩 1.推荐使用vscode进行项目开发
🧩 2.vscode需要安装以下插件：
Vetur
eslint
prettier
🧩 3.vscode setting.json文件建议配置如下：
{
	"editor.tabSize": 4,
	"editor.formatOnSave": false,
	"editor.suggest.snippetsPreventQuickSuggestions": false,
	"vetur.format.defaultFormatter.html": "none",
	"vetur.format.defaultFormatter.js": "vscode-typescript",
	"vetur.format.defaultFormatter.scss": "prettier",
	"vetur.format.styleInitialIndent": true,
	"vetur.format.options.tabSize": 4,
	"[vue]": {
		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
		"editor.formatOnSave": true,
		"editor.formatOnType": true
	},
	"[scss]": {
		"editor.defaultFormatter": "michelemelluso.code-beautifier"
	},
	"scss.lint.duplicateProperties": "warning",
	"scss.lint.propertyIgnoredDueToDisplay": "error",
	"scss.lint.zeroUnits": "warning",
	"[javascript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"[json]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"emmet.syntaxProfiles": {
		"vue-html": "html",
		"vue": "html"
	},
	"editor.mouseWheelZoom": true,
	"[markdown]": {
		"editor.defaultFormatter": "yzhang.markdown-all-in-one"
	},
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"explorer.confirmDragAndDrop": false,
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
	},
	"editor.defaultColorDecorators": true,
	"prettier.requireConfig": true,
	"prettier.useTabs": true,
	"eslint.codeActionsOnSave.rules": null,
	"editor.insertSpaces": false,
	"editor.detectIndentation": false,
	"prettier.bracketSameLine": true,
	"prettier.embeddedLanguageFormatting": "off",
	"prettier.vueIndentScriptAndStyle": true,
	"clang-format.language.typescript.enable": false,
	"json.schemas": [],
	"eslint.options": {},
	"workbench.colorTheme": "Default Dark+",
	"github.copilot.editor.enableAutoCompletions": true,
	"window.confirmSaveUntitledWorkspace": false,
	"editor.codeActionsOnSave": {}
}
NDP-CM-TEM-VUE2/ -------------------------------------------- 工程名称
├── assets/ ------------------------------------------------- 静态资源
│   ├── image/ ---------------------------------------------- 图片资源
│   ├── plugins/ -------------------------------------------- 插件资源
│   └── utils/ ---------------------------------------------- 工具类
│
├── config/ ------------------------------------------------- 工程配置
│   │
│   ├── build/ ---------------------------------------------- 工程脚本
│   │   ├── build-component.js ------------------------------ 构建组件命令脚本
│   │   ├── build-document.js ------------------------------- 构建文档命令脚本
│   │   ├── clear-component.js ------------------------------ 清除所有组件命令脚本
│   │   ├── clear-component-only.js ------------------------- 清除单个组件命令脚本
│   │   ├── create-component.js ----------------------------- 创建组件命令脚本
│   │   ├── git-pull.js ------------------------------------- 拉取代码命令脚本
│   │   ├── git-push.js ------------------------------------- 提交代码命令脚本
│   │   ├── lint-formart.js --------------------------------- 工程代码校验命令脚本
│   │   ├── publish-component.js ---------------------------- 推送组件命令脚本
│   │   ├── serve-document.js ------------------------------- 运行文档工程命令脚本
│   │   └── serve-example.js -------------------------------- 运行示例工程命令脚本
│   ├── generate/ ------------------------------------------- 组件生成
│   │   ├── clear-component.js ------------------------------ 清除单个组件逻辑代码
│   │   ├── clear-components.js ----------------------------- 清除所有组件逻辑代码
│   │   └── create-components.js ---------------------------- 创建组件逻辑代码
│   ├── md-loader/ ------------------------------------------ 文档构建
│   │   ├── config.js --------------------------------------- 配置脚本
│   │   ├── container.js ------------------------------------ 容器模板
│   │   ├── fence.js ---------------------------------------- 渲染策略
│   │   ├── index.js ---------------------------------------- 入口文件
│   │   └── util.js ----------------------------------------- 工具类
│   └── webpack/ -------------------------------------------- 工程构建
│       ├── webpack.component.js ---------------------------- 组件工程构建
│       ├── webpack.document.js ----------------------------- 文档工程构建
│       └── webpack.examples.js ----------------------------- 示例工程构建
│
├── document/ ----------------------------------------------- 文档工程
│   ├── assets/ --------------------------------------------- 文档工程静态资源
│   │   └── styles/ ----------------------------------------- 文档工程样式资源
│   │       ├── color-browser.css --------------------------- 代码高亮
│   │       └── common.css ---------------------------------- 公共样式
│   ├── components/ ----------------------------------------- 组件
│   │   ├── demo-block.vue ---------------------------------- 文档渲染模板
│   │   └── header.vue -------------------------------------- 头部组件
│   ├── config/ --------------------------------------------- 配置文件
│   │   └── config.json ---------------------------------- 组件配置文件
│   ├── docs/ ----------------------------------------------- 文档文件目录
│   │   └── bar-chart.md ------------------------------------ 组件文档文件
│   ├── pages/ ---------------------------------------------- 页面目录
│   │   ├── components.vue ---------------------------------- 组件文档页面
│   │   └── design.vue -------------------------------------- 组件首页
│   ├── app.vue --------------------------------------------- 文档工程入口页面
│   ├── route.config.js ------------------------------------- 路由配置脚本
│   ├── entry.js -------------------------------------------- 入口脚本文件
│   ├── index.html ------------------------------------------ 入口页面文件
│   ├── nav.config.json ------------------------------------- 菜单配置文件
│   └── util.js --------------------------------------------- 工具类脚本
│
├── examples/ ----------------------------------------------- 示例工程
│   ├── play/ ----------------------------------------------- 示例工程运行目录
│   │   └── index.vue --------------------------------------- 示例工程运行页面
│   ├── index.html ------------------------------------------ 示例工程入口页面
│   ├── index.tpl ------------------------------------------- 示例工程入口模板
│   └── play.js --------------------------------------------- 示例工程运行脚本
│
├── packages/ ----------------------------------------------- 组件包工程
│   ├── assets/ --------------------------------------------- 组件包静态资源
│   │   ├── font/ ------------------------------------------- 字体文件
│   │   ├── images/ ----------------------------------------- 图片资源
│   │   ├── script/ ----------------------------------------- 脚本资源
│   │   └── ... --------------------------------------------- 其他资源
│   ├── components/ ----------------------------------------- 组件列表
│   │   ├── xxxx/ ------------------------------------------- 创建的组件
│   │   │   ├── index.js ------------------------------------ 组件入口文件
│   │   │   └── src/ ---------------------------------------- 组件源码目录
│   │   │       ├── main.scss ------------------------------- 组件样式文件
│   │   │       └── main.vue -------------------------------- 组件代码文件
│   │   ├── index.js ---------------------------------------- 组件总入口文件
│   │   └── index.scss -------------------------------------- 组件总入口样式
│   ├── theme-chalk/ ---------------------------------------- 皮肤系统目录
│   │   ├── src/ -------------------------------------------- 皮肤源码目录
│   │   │    ├── common ------------------------------------- 变量目录
│   │   │    │   ├── _themeify.scss ------------------------- 皮肤系统方法
│   │   │    │   ├── _themes.scss --------------------------- 皮肤系统变量
│   │   │    │   └── var.scss ------------------------------- 变量scss文件
│   │   │    ├── mixins ------------------------------------- 变量混入相关目录
│   │   │    │    ├── config.scss --------------------------- 前缀
│   │   │    │    ├── function.scss ------------------------- 方法
│   │   │    │    └── mixins.scss --------------------------- 方法实现
│   │   │    └── base.scss ---------------------------------- 皮肤入口文件
│   │   └── gulpfile.js ------------------------------------- 皮肤系统构建脚本
│   └── plugins/ -------------------------------------------- 引入外部依赖目录
│       └── index.js ---------------------------------------- 引入和注册依赖入口文件
│
├── components-lib ------------------------------------------ 构建后的组件目录
├── document-lib -------------------------------------------- 构建后的文档目录
├── package.json -------------------------------------------- 工程说明文档
├── pnpm-lock.yaml ------------------------------------------ 工程依赖版本信息记录文档
├── .cz-config.js ------------------------------------------- 代码提交配置
├── .editorconfig ------------------------------------------- 代码编辑器配置
├── .eslintignore ------------------------------------------- eslint忽略文件
├── .eslintrc.js -------------------------------------------- eslint配置文件
├── .gitignore ---------------------------------------------- git忽略文件
├── .prettierignore ----------------------------------------- prettier忽略文件
├── .prettierrc.js ------------------------------------------ prettier配置文件
├── commitlint.config.js ------------------------------------ 代码提交检测配置文件
├── components.json ----------------------------------------- 组件配置文件
├── CHANGELOG.md -------------------------------------------- 代码提交记录
└── README.md ----------------------------------------------- 工程说明文档
pnpm run lint:formart ---------- 执行代码检测并修复
pnpm run create:component ------ 创建组件
pnpm run clear:component ------- 清除所有组件
pnpm run clear:component-only -- 清除单个组件
pnpm run build:component ------- 打包组件
pnpm run serve:document -------- 运行文档工程
pnpm run serve:example --------- 运行示例工程
pnpm run build:document -------- 打包文档
pnpm run publish:component ----- 发布组件
npm run git:push --------------- 提交代码
npm run git:pull --------------- 拉取代码
💡💡💡 注意：
清除组件包命令将会把工程下所有组件清除。请慎用！
发布组件包需要修改package.json文件中的版本字段。版本控制标准请详见《组件化封装规范》
🎉1.将工程从远程仓库克隆至本地。
🎉2.在工程根目录下打开命令窗口。
🎉3.修改工程名称，及package.json文件。
🎉4.执行命令：pnpm install 安装依赖。
开发组件前，请将工程名称修改为你要封装的组件名称。命名规范详见《组件化封装规范》
开发组件前，请修改package.json中的如下字段：
"name": "组件名称", --------- 命名规范详见《组件化封装规范》
"version": "0-0.0-0.0-0", -- 版本号，版本号设置规范详见《组件化封装规范》
"description": "组件描述", -- 组件描述，要求简介明了。例如：echart 图表组件库
"prefix":"组件统一前缀",  --- 组件统一前缀，命名规范详见《组件化封装规范》
"keywords": [
	"检索关键字",   -------- 组件检索关键字，要求于组件库强关联。内容包含-技术栈，实现业务，
],							特点等
"repository": {
	"url": "组件仓库地址" --- 组件远程git仓库地址。
},
"author": "作者", ---------- 封装该组件的作者
执行pnpm run clear:component 将工程中的示例组件清除掉。
💡💡💡（注意：该命令会将组件工程中的所有组件和文档一次性删除，执行前请做好备份）
执行pnpm run create:component 创建一个组件。组件命名请遵循《组件化封装规范》
创建后的组件目录结构如下：
│ bar-chart/ ------------------------------------------- 创建的组件
│   │   │   ├── index.js ------------------------------------ 组件入口文件
│   │   │   └── src/ ---------------------------------------- 组件源码目录
│   │   │       ├── main.scss ------------------------------- 组件样式文件
│   │   │       └── main.vue -------------------------------- 组件代码文件
│   │   ├── index.js ---------------------------------------- 组件总入口文件
└── └── └── index.scss -------------------------------------- 组件总入口样式

💡💡💡 注意： 组件库前缀
为了避免组件在生产环境中与其他组件重名而引发可能的问题，在工程根目录下package.json
中预留了prefix前缀属性，这样，在本工程中创建组件都会追加一个前缀。
例如：配置了prefix为 'base'，
创建组件时输入的组件名为 'test-component'，则组件的注册名为：BaseTestComponent，
组件html类名为：base-test-component。
组件业务编码目录结构如下：
├── packages/ ----------------------------------------------- 组件包工程
│   ├── assets/ --------------------------------------------- 组件包静态资源
│   │   ├── font/ ------------------------------------------- 字体文件
│   │   ├── images/ ----------------------------------------- 图片资源
│   │   ├── script/ ----------------------------------------- 脚本资源
│   │   └── ... --------------------------------------------- 其他资源
│   ├── components/ ----------------------------------------- 组件列表
│   │   ├── xxxx/ ------------------------------------------- 创建的组件
│   │   │   ├── index.js ------------------------------------ 组件入口文件
│   │   │   └── src/ ---------------------------------------- 组件源码目录
│   │   │       ├── main.scss ------------------------------- 组件样式文件
│   │   │       └── main.vue -------------------------------- 组件代码文件
│   │   ├── index.js ---------------------------------------- 组件总入口文件
│   │   └── index.scss -------------------------------------- 组件总入口样式
│   └── theme-chalk/ ---------------------------------------- 皮肤系统目录
│       ├── src/ -------------------------------------------- 皮肤源码目录
│       │    ├── common ------------------------------------- 变量目录
│       │    │   ├── _themeify.scss ------------------------- 皮肤系统方法
│       │    │   ├── _themes.scss --------------------------- 皮肤系统变量
│       │    │   └── var.scss ------------------------------- 变量scss文件
│       │    ├── mixins ------------------------------------- 变量混入相关目录
│       │    │    ├── config.scss --------------------------- 前缀
│       │    │    ├── function.scss ------------------------- 方法
│       │    │    └── mixins.scss --------------------------- 方法实现
│       │    └── base.scss ---------------------------------- 皮肤入口文件
│       ├── gulpfile.js ------------------------------------- 皮肤系统构建脚本
│       plugins/ -------------------------------------------- 引入外部依赖目录
│       └── index.js ---------------------------------------- 引入和注册依赖入口文件
👋1. assets 文件夹下的内容为所有组件用到的静态资源。
	注意：
	1.在编写组件代码时，请将组件用到的所有静态资源分类放置在该目录下。
	2.引用方式可采用相对路径进行引入
👋2. components 文件夹下的内容为组件业务相关代码。
	注意：
	1.编写代码时请勿修改自动生成的文件名和模板内容。
👋3. theme-chalk 文件夹下的内容为所有组件的皮肤系统
	注意：
	1.请勿删除或修改该目录下的文件目录。
👋4. plugins 文件夹下是组件需要依赖的第三方包。
	注意：
	1.请勿删除或修改该目录下的文件目录。
当前封装的组件/组件库需要使用到第三方依赖时，请使用命令：pnpm install xxx 进行安装。
确保用于生产环境的第三方依赖在package.json文件中的 dependencies 字段中。
当前组件库引入第三方依赖 请在以下文件中操作：
├── packages/ ----------------------------------------------- 组件包工程
│   └── plugins/ -------------------------------------------- 引入外部依赖目录
│       └── index.js ---------------------------------------- 引入和注册依赖入口文件

引入方式如下：（例如element-ui）
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export function importPlugins(Vue) {
    Vue.use(ElementUI)
}

当前组件库中的某个组件单独依赖于第三方依赖，请在以下文件中操作
└── packages/ ----------------------------------------------- 组件包工程
    └── components/ ----------------------------------------- 组件列表
        └── xxxx/ ------------------------------------------- 创建的组件
              └── index.js ------------------------------------ 组件入口文件
引入方式如下：👉（例如element-ui）
import BarChart from './src/main.vue'
/* istanbul ignore next */
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
BarChart.install = function (Vue) {
	Vue.use(ElementUI);
    Vue.component(BarChart.name, BarChart)
}
export default BarChart

💡💡💡 注意：组件库引入依赖
如果组件库需要使用第三方依赖，请在工程根目录下packages/plugins/index中导入依赖及其样式文件。
如果需要，请在导出的importPlugins方法中注册或安装依赖。
当前封装的组件/组件库需要使用到静态资源时，请将静态资源放到如下目录下：
├── packages/ ----------------------------------------------- 组件包工程
│   ├── assets/ --------------------------------------------- 组件包静态资源
│   │   ├── font/ ------------------------------------------- 字体文件
│   │   ├── images/ ----------------------------------------- 图片资源
│   │   ├── script/ ----------------------------------------- 脚本资源
│   │   └── ... --------------------------------------------- 其他资源
资源类型可自行创建，在组件编码中引用时，可参考如下使用方式：👉
<!-- main.vue -->
<template>
    <div class="bar-chart">
        <img src="../../../assets/images/demo.png" alt="" />
    </div>
</template>
<script>
export default {
    name: 'BarChart'
}
</script>

<style scoped>
.bar-chart {

}
</style>

<!-- main.scss -->
@import '../../../theme-chalk/src/mixins/mixins.scss';
@import '../../../theme-chalk/src/common/var.scss';
@include b(bar-chart) {
    background: url('../../../assets/images/demo.png');
}

💡💡💡 注意：组件库静态资源
组件库所使用的静态资源请放置在工程根目录下packages/assets文件夹中。
🎨 本工程为开发人员预置了一些scss函数和变量，开发人员可以在此基础上拓展，
可以一定程度上提高编写组件样式的规范性和复用性；同时也支持系统主题样式的设定。
下面将分情况详细介绍：

#### 不需要多套主题（默认）🎨 ####
当我们要开发的组件不需要多套主题切换时，我们只需要在组件的样式文件中引入如下文件：👉

│   ├── components/ ----------------------------------------- 组件列表
│   │   ├── xxxx/ ------------------------------------------- 创建的组件
│   │   │   ├── index.js ------------------------------------ 组件入口文件
│   │   │   └── src/ ---------------------------------------- 组件源码目录
│   │   │       └── main.scss ------------------------------- 组件样式文件

@import '../../../theme-chalk/src/mixins/mixins.scss';
@import '../../../theme-chalk/src/common/var.scss';

其中var.scss 文件中可以定义一系列scss变量进行复用；mixins.scss 文件定义了混入方法，可以简化编写。
然后就可以在组件的样式文件 main.scss 中预置的 b函数中直接使用这些变量和方法：👉

@include b(base-test-component) {
    background-color: pink;
    @include box_flex($width: 400px,$height: 300px);
    .box {
        width: 100px;
        height: 100px;
        background-color: $bg-color2;
    }
}

#### 需要多套主题 🎨 #### 
当开发的组件需要多套主题样式时，首先需要在
packages/theme-chalk/src/common/_themes.scss
文件中定义多套主题及变量，例如：👉
├── packages/ ----------------------------------------------- 组件包工程
│   └── theme-chalk/ ---------------------------------------- 皮肤系统目录
│       ├── src/ -------------------------------------------- 皮肤源码目录
│       │    ├── common ------------------------------------- 变量目录
│       │    │   └── _themes.scss --------------------------- 皮肤系统变量

@import './var.scss';
$themes: (
    light: (
        bg-color: $light-bg-color,
        font-color: $light-font-color
    ),
    dark: (
        bg-color: $dark-bg-color,
        font-color: $dark-font-color
    )
);


然后需要在packages/theme-chalk/src/common/var.scss
中定义相应主题所需的变量，例如：👉
├── packages/ ----------------------------------------------- 组件包工程
│   └── theme-chalk/ ---------------------------------------- 皮肤系统目录
│       ├── src/ -------------------------------------------- 皮肤源码目录
│       │    ├── common ------------------------------------- 变量目录
│       │    │   └── var.scss ------------------------------- 公共变量

// 系统暗黑主题颜色变量
$light-bg-color: #fff !default;
$light-font-color: #000 !default;

// 系统暗黑主题颜色变量
$dark-bg-color: #666 !default;
$dark-font-color: #fff !default;


其次，在组件的样式文件 main.scss 中，引入主题文件并运用主题对应的引用变量：👉
│   ├── components/ ----------------------------------------- 组件列表
│   │   ├── xxxx/ ------------------------------------------- 创建的组件
│   │   │   ├── index.js ------------------------------------ 组件入口文件
│   │   │   └── src/ ---------------------------------------- 组件源码目录
│   │   │       └── main.scss ------------------------------- 组件样式文件
@import '../../../theme-chalk/src/mixins/mixins.scss';
@import '../../../theme-chalk/src/common/_themeify.scss';

@include b(base-test-component) {
    @include themeify {
        background-color: themed('bg-color') !important;
        color: themed('font-color') !important;
    }
}

最后，在引用组件库的工程中设置页面主题就可以看到不同主题的样式效果了：👉
document.getElementsByTagName('body')[0].setAttribute('data-theme', 'light' | 'dark')
当前封装的组件文档工程目录结构如下
├── document/ ----------------------------------------------- 文档工程
│   ├── assets/ --------------------------------------------- 文档工程静态资源
│   │   └── styles/ ----------------------------------------- 文档工程样式资源
│   │       ├── color-browser.css --------------------------- 代码高亮
│   │       └── common.css ---------------------------------- 公共样式
│   ├── components/ ----------------------------------------- 组件
│   │   ├── demo-block.vue ---------------------------------- 文档渲染模板
│   │   └── header.vue -------------------------------------- 头部组件
│   ├── config/ --------------------------------------------- 配置文件
│   │   └── config.json ---------------------------------- 组件配置文件
│   ├── docs/ ----------------------------------------------- 文档文件目录
│   │   └── bar-chart.md ------------------------------------ 组件文档文件
│   ├── pages/ ---------------------------------------------- 页面目录
│   │   ├── components.vue ---------------------------------- 组件文档页面
│   │   └── design.vue -------------------------------------- 组件首页
│   ├── app.vue --------------------------------------------- 文档工程入口页面
│   ├── route.config.js ------------------------------------- 路由配置脚本
│   ├── entry.js -------------------------------------------- 入口脚本文件
│   ├── index.html ------------------------------------------ 入口页面文件
│   ├── nav.config.json ------------------------------------- 菜单配置文件
│   └── util.js --------------------------------------------- 工具类脚本

执行 pnpm create:component 命令后会在如下目录下生成对应组件的文档
├── document/ ----------------------------------------------- 文档工程
│   ├── docs/ ----------------------------------------------- 文档文件目录
│   │   └── bar-chart.md ------------------------------------ 组件文档文件

<!-- xxx.md 文档编写示例如下 👉-->
## 组件名称
:::demo 组件描述
```html
<template>
	<bar-chart></bar-chart>       -------------------------- 组件代码示例
</template>
<script>
export default {
    data() {
        return {
            navs: Navs
        }
    }
}
</script>
:::

文档编写完成后，可运行：pnpm run serve:document 运行文档系统并预览相关文档。

💡💡💡 注意： 文档系统路由配置
通过pnpm run create:component创建组件后，组件文档系统路由配置便会自动注册。
在工程根目录下document/nav.config.json文件中可以修改组件的title属性，
以便在文档系统中为组件设置中文名。


💡💡💡 文档系统页面内容配置
为了便于后期的维护和拓展，组件文档系统页面中的部分内容是读取配置文件而渲染的，配置文件路径是：
工程根目录下document/config/config.json


下面分别是配置字段的说明：
#### demo-block: 组件文档代码块控制配置 ####
hide-text: 组件代码展开时隐藏按钮的文字显示
show-text: 组件代码关闭时展开按钮的文字显示


#### home: 文档系统首页内容配置 ####
title： 首页标题文字
subtitle： 首页副标题文字
logoImg： 首页logo图片
features： 首页下方组件库功能特点介绍配置，数组形式
	featureTitle： 组件库功能特点标题
	featureDescription： 组件库功能特点概述
	featureIcon 组件库功能特点图标（只需要配置文件名即可，文档系统图片资源路径统一在document/assets/images文件夹下）
当前封装的组件预览工程目录结构如下
├── examples/ ----------------------------------------------- 示例工程
│   ├── play/ ----------------------------------------------- 示例工程运行目录
│   │   └── index.vue --------------------------------------- 示例工程运行页面
│   ├── index.html ------------------------------------------ 示例工程入口页面
│   ├── index.tpl ------------------------------------------- 示例工程入口模板
│   └── play.js --------------------------------------------- 示例工程运行脚本

请在如下目录文件中编写组件引用代码并预览当前封装的组件效果
├── examples/ ----------------------------------------------- 示例工程
│   ├── play/ ----------------------------------------------- 示例工程运行目录
│   │   └── index.vue --------------------------------------- 示例工程运行页面

例如：👉
<template>
    <div>
        <bar-chart></bar-chart> ----------------------------- 预览的组件调用
    </div>
</template>

<script>
export default {
}
</script>

预览工程编码完成后，可运行：pnpm run serve:example 运行预览系统并预览相关组件。
📊 1.组件工程集成了自动化代码提交工具。
📊 2.需要在git上创建对应的代码仓库。
📊 3.执行 npm run git:push 进行代码提交。
📊 4.按照提示操作进行信息填写。提交后执行 git push将代码推送至远程仓库。
📊 5.执行 npm run git:pull 进行代码拉取。
📊 1.执行命令pnpm config set registry 你的私有化镜像地址。
📊 2.执行命令pnpm login 登录组件管理平台。
📊 3.修改package.json中的组件信息。
📊 4.执行命令pnpm run publish:component 即可发布成功。
💡💡💡 注意：
工程镜像源切换时。需要通过切换的镜像源重新安装工程所有依赖。
组件发布时，依次会执行代码检测、代码提交、
组件构建打包、组件文档工程构建打包操作。
推送包无需执行其他操作。执行命令npm run publish:component 即可

🚀 回到顶部

ndp-cm-tem-vue2vue2
0.0.1

1 year ago