sone-ui-component-3.2.4 2.1.33 → 2.1.34

package/Notice.md

@@ -0,0 +1,106 @@
+# sone-ui-component
+
+## Sone UI 组件开发文档
+
+## 基本介绍
+
+### 开发说明
+
+1. 安装依赖
+
+``` bash
+npm i
+```
+
+### 脚手架
+  - [Vue-cli3.x](https://cli.vuejs.org/zh/)
+
+### 主要框架和库
+  - 核心：[Vue2.x](https://cn.vuejs.org/v2/guide/)
+  - 打包：[webpack4.x](https://webpack.js.org/concepts/)
+  - UI库：[element-ui](https://element.eleme.cn/#/zh-CN/guide/design)
+  
+### 主要目录结构
+
+``` bash
+    ├─build           构建配置文件
+    ├─docs            组件的文档项目
+    ├─demo            组件的本地测试
+    ├─lib             组件UMD打包的目录
+    ├─packages        组件定义目录
+    ├─public          公共目录
+    └─src             组件引用的目录
+```
+
+## 运行指令说明
+
+### 在定义好组件后，运行以下命令生成组件被使用的入口文件，用于组件注册和单独引入
+
+``` bash
+npm run build:file
+```
+
+### 组件打包成UMD
+
+``` bash
+npm run lib
+```
+
+### 组件库在发布之前，最好运行，以保证最新的组件入口文件和UMD生成
+
+``` bash
+npm run publish:pre
+```
+
+### 在定义好组件后维护组件文档，想要在组件的文档（markdown）中使用组件做示例时，使用以下命令，自动在vuepress 生成定义好的组件文件[慎用！！！]
+
+``` bash
+npm run build:docs
+```
+
+[慎用！！！]：此操作会覆盖原有的组件文件，可能会出现对象未定义（nodejs）
+
+### 本地启动组件的文档项目
+
+``` bash
+npm run docs:dev
+```
+
+### 组件的文档项目打包
+
+``` bash
+npm run docs:build
+```
+
+### 本地组件测试：在demo文件夹的App.vue,使用你想要查看效果的组件
+
+``` bash
+npm run dev:demo
+```
+
+## 主要流程
+
+### 定义组件
+
+1. 在`src`文件夹下，定义组件；
+2. 在`components.json`文件中，维护好组件的地址；
+3. 运行`npm run build:file`, 生成组件的入口文件；
+
+### 测试组件效果
+
+定义组件后，测试组件
+
+1. 在`demo`文件夹下的`*.vue`，书写相关组件的测试代码；
+2. 运行`npm run dev:demo`，查看效果；
+
+### 组件文档维护
+
+1. 当有新的组件定义，就需要运行`npm run build:docs`, 将组件复制到docs项目内部；
+2. 在`docs`文件夹的`components`文件夹内，维护组件markdown文件；
+3. 在`docs`文件夹的`.vuepress`的`config.js`内，定义组件的导航路径；
+4. 运行`npm run docs:dev`，查看效果；
+
+## 参考
+
+[element](https://github.com/ElemeFE/element)
+[vuepress](https://www.vuepress.cn/guide/directory-structure.html)