From 612303a675f25339bb4d8fe394096df128ab6ca7 Mon Sep 17 00:00:00 2001 From: theajack <1506282385@qq.com> Date: Sat, 11 Apr 2020 14:46:57 +0800 Subject: [PATCH] feat: docs --- README.md | 2 +- .../demo/catButton/type_catButton.vue | 37 ++- docs/.vuepress/components/home.vue | 164 ++++++++++++ docs/.vuepress/components/jsbox.vue | 82 ++++++ docs/.vuepress/config.js | 4 +- docs/.vuepress/enhanceApp.js | 1 + docs/.vuepress/styles/palette.styl | 2 +- docs/README.md | 7 +- docs/guide/README.md | 6 +- docs/guide/start.md | 246 ++++-------------- docs/src/element.css | 8 + docs/src/index.js | 1 + helper/README.md | 2 +- index.html | 2 +- npm/all/README.md | 2 +- npm/all/package.json | 2 +- npm/cnchar/README.md | 2 +- npm/cnchar/package.json | 2 +- npm/draw/README.md | 2 +- npm/draw/package.json | 2 +- npm/hanzi-util-base/README.md | 2 +- npm/hanzi-util-base/package.json | 2 +- npm/hanzi-util/README.md | 2 +- npm/hanzi-util/package.json | 2 +- npm/order/README.md | 2 +- npm/order/package.json | 2 +- npm/poly/README.md | 2 +- npm/poly/package.json | 2 +- npm/trad/README.md | 2 +- npm/trad/package.json | 2 +- package.json | 3 +- 31 files changed, 361 insertions(+), 238 deletions(-) create mode 100644 docs/.vuepress/components/home.vue create mode 100644 docs/.vuepress/components/jsbox.vue create mode 100644 docs/src/element.css diff --git a/README.md b/README.md index a970075..40a9682 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@

-### 🚀 好用小巧、功能全面的汉字拼音笔画 js 库 +### 🚀 功能全面、多端支持的汉字拼音笔画 js 库 **快速上手 | [在线试用/文档](https://theajack.gitee.io/cnchar) | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new)** diff --git a/docs/.vuepress/components/demo/catButton/type_catButton.vue b/docs/.vuepress/components/demo/catButton/type_catButton.vue index 24a7289..0f17073 100644 --- a/docs/.vuepress/components/demo/catButton/type_catButton.vue +++ b/docs/.vuepress/components/demo/catButton/type_catButton.vue @@ -1,26 +1,25 @@ // catButton 的type属性 示例 - diff --git a/docs/.vuepress/components/home.vue b/docs/.vuepress/components/home.vue new file mode 100644 index 0000000..c5e8771 --- /dev/null +++ b/docs/.vuepress/components/home.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/docs/.vuepress/components/jsbox.vue b/docs/.vuepress/components/jsbox.vue new file mode 100644 index 0000000..efb6e06 --- /dev/null +++ b/docs/.vuepress/components/jsbox.vue @@ -0,0 +1,82 @@ + + + + diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index b297f93..9f36a95 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -9,8 +9,8 @@ // 为了更好的理解，以下所有配置，注释，须配合查看页面实际效果！ module.exports = { - title: 'Cnchar', // 标题 - description: '好用小巧、功能全面的汉字拼音笔画js库', // 描述 + title: 'cnchar', // 标题 + description: '功能全面、多端支持的汉字拼音笔画js库', // 描述 dest: './assets/v2', // 基本url base: '/cnchar/assets/v2/', // 基本url // 注入到当前页面的 HTML 中的标签 diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 8ae24c4..1c217a7 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -8,6 +8,7 @@ import VueHighlightJS from 'vue-highlight.js'; import 'highlight.js/styles/vs2015.css'; import '../../npm/all/cnchar.all.min.js'; +import 'easy-icon'; // 引入自己的组件库 import Cat from '../src/index'; diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index 8aa8338..53b70f5 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -1,6 +1,6 @@ // 用于重写默认颜色常量，或者设置新的 stylus 颜色常量 -$accentColor = #00A0E6 // 主题色 +$accentColor = #007acc // 主题色 $textColor = #2c3e50 // 文字颜色 diff --git a/docs/README.md b/docs/README.md index e7ff35a..55dc6ab 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,4 +1,8 @@ --- +cnchar--功能全面、多端支持的汉字拼音笔画js库 +--- + + + \ No newline at end of file diff --git a/docs/guide/README.md b/docs/guide/README.md index 666b8b9..7e89dde 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -18,13 +18,13 @@ sidebarDepth: 0 //吐槽：这里设置0无效！只能设置1或2！ issue

--> -**cnchar 是一款好用小巧、功能全面的汉字拼音笔画 js 库** +**cnchar 是一款功能全面、多端支持的汉字拼音笔画 js 库** -**快速上手 | [在线试用/文档](https://theajack.gitee.io/cnchar) | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new)** +**快速上手 | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new)** ## 1. 前言 -感谢同学们对于 cnchar 的支持，由于 cnchar 词库来源于网络，虽然经过了本人的修改和扩充，但是还是难免有错误与缺漏之处，希望大家可以将使用中发现的错误与缺漏之处 [反馈](https://github.com/theajack/cnchar/issues/new) 给我（或自行修改提交，经过审查无误过后会合到 cnchar 中） +感谢同学们对于 cnchar 的支持，由于 cnchar 词库来源于网络，虽然经过了本人的修改和扩充，但是还是难免有错误与缺漏之处，希望大家可以将使用中发现的错误与缺漏之处 [反馈](https://github.com/theajack/cnchar/issues/new) 给我或自行修改提交pr [我要反馈错误或缺漏](https://github.com/theajack/cnchar/issues/new) diff --git a/docs/guide/start.md b/docs/guide/start.md index 2449e32..456158f 100644 --- a/docs/guide/start.md +++ b/docs/guide/start.md @@ -1,212 +1,74 @@ -## 安装 -::: tip -**克隆项目** -git clone https://github.com/1011cat/shotCat_doc.git -**进入项目目录** -cd shotCat_doc +## 1. npm安装 -**安装依赖** -npm install - -**建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题** -npm install --registry=https://registry.npm.taobao.org - -**启动服务** -npm run dev - -浏览器访问 http://localhost:6868 -::: - -## 项目结构目录说明 +安装[主库](https://npmjs.com/package/cnchar)： ``` -|-- shotCat_doc - |-- LICENSE - |-- deploy.sh //用于自动部署 - |-- package-lock.json - |-- package.json - |-- docs - | |-- README.md //文档首页配置 - | |-- .vuepress //用于存放全局的配置、组件、静态资源等。 - | | |-- config.js //文档配置文件 - | | |-- enhanceApp.js //应用级别的配置 其实就是引入文档需要用到的第三方插件 - | | |-- components //该目录中的 Vue 组件将会被自动注册为全局组件 - | | | |-- baseComponent //文档会用到的全局公共组件 - | | | | |-- apiTable.vue //组件的参数表格 - | | | | |-- codeBox.vue //包裹示例的组件 - | | | | |-- star.vue //底部彩蛋组件 - | | | |-- demo //组件示例 - | | | |-- catButton //存放button组件相关示例 - | | | |-- type_catButton.vue - | | |-- dist //存放打包后的文件 - | | | - | | |-- public //静态资源目录 - | | | |-- favicon.jpeg - | | | |-- name.png - | | |-- styles //用于存放样式相关的文件 - | | |-- index.styl //将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级 - | | |-- palette.styl //用于重写默认颜色常量，或者设置新的 stylus 颜色常量 - | |-- components //存放组件文档要用到的markdown - | | |-- README.md - | | |-- 1.0 //1.0 版本的文档 如果不需要版本管理，直接删除1.0这层文件夹即可 - | | | |-- README.md - | | | |-- catButton.md - | | |-- 2.0 //2.0 版本的文档 - | | |-- README.md - | | |-- catButton.md - | |-- guide //使用说明的文件夹 - | |-- introduction.md - | |-- quickStart.md - |-- src //存放你自己的ui组件库 - |-- index.js - |-- components - |-- catButton - |-- catButton.vue +npm i cnchar ``` -## 快速开始 -### step1 -将自己的组件库放到根目录上，然后在docs/.vuepress/enhanceApp.js进行配置 - -::: tip -```js -//docs/.vuepress/enhanceApp.js - -//引入你的组件库 确保你的组件库index文件有install方法 -//如果不会，没关系，src目录里自带一个简单组件库示例，可供参考 -import Cat from '../../src/index' - -export default ({ - Vue, // VuePress 正在使用的 Vue 构造函数 - options, // 附加到根实例的一些选项 - router, // 当前应用的路由实例 - siteData // 站点元数据 - }) => { - Vue.use(Cat) - } -``` -::: - -然后配置你的侧边栏路径，详细配置可以直接查看docs/.vuepress/components/config.js 内的注释。 -::: tip -```js -// docs/.vuepress/components/config.js - -//这里配置的是button组件页面的路径 -sidebar:{ - '/components/2.0/':[ - { - title: '基础组件', // 必要的 配置侧边栏名称 - path: '', - collapsable: false, // 可选的, 右侧侧边栏是否展开,默认值是 true - // 如果组件很多时，建议将children配置单独放到一个js文件中，然后进行引入 - children: [ - { - title:'Button 按钮', - path: 'catButton', //在项目中对应的路径是 docs/components/2.0/catButton.md - }] - } - ] -}, +按需安装功能库： ``` -::: - -### step2 -现在你已经可以开始编写自己的组件文档了，这里先编写一个组件展示示例：以我的cat-button为例 - -::: tip -```html -// docs/.vuepress/components/demo/catButton/type_catButton.vue - - - - - +npm i cnchar-poly cnchar-order cnchar-trad cnchar-draw ``` -::: +浏览器环境中功能库可以直接使用： -### step3 -在上面配置好的路径里docs/components/2.0/catButton.md，创建markdown文件。接着就可以愉快地编写button组件页面！ -::: tip -```html -// docs/components/2.0/catButton.md - ---- -title: 2.0 Button 按钮 ---- - - - - - - - - - - -<<< @/docs/.vuepress/components/demo/catButton/type_catButton.vue +
+ + import cnchar from 'cnchar'; + // 以下功能库请按需使用 + import 'cnchar-poly'; + import 'cnchar-order'; + import 'cnchar-trad'; + import 'cnchar-draw'; - +
- - - +非浏览器环境中功能库需要使用use方法加载，且不支持 `cnchar-draw` 库： - - +
+ + import cnchar from 'cnchar'; + // 以下功能库请按需使用 + import poly from 'cnchar-poly'; + import order from 'cnchar-order'; + import trad from 'cnchar-trad'; + cnchar.use(poly, order, trad); + +
+ + +## 2. cdn使用 + +使用 script 标签使用： + +
+ + <script src="https://cdn.jsdelivr.net/npm/cnchar/cnchar.min.js"></script> + <!--以下功能库请按需使用--> + <script src="https://cdn.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cnchar-order/cnchar.order.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cnchar-draw/cnchar.draw.min.js"></script> + +
+ +## 3. 快速使用 + + 测试 + + + + - - - - - -``` -::: - -至此，你已经完成了一个简单的button组件展示，概括来说就是： -1. 配置侧边栏导航 -2. 写示例代码 -3. 对应的页面md - -更详细的配置和说明都在对应代码里。每个代码文件里，都有逐行的注释及防坑说明。 - - \ No newline at end of file diff --git a/docs/src/element.css b/docs/src/element.css new file mode 100644 index 0000000..2a891f9 --- /dev/null +++ b/docs/src/element.css @@ -0,0 +1,8 @@ +.el-button--primary{ + background-color: #007acc; + border-color: #007acc; +} +.el-button--primary:focus, .el-button--primary:hover { + background: #3aa0e4; + border-color: #3aa0e4; +} \ No newline at end of file diff --git a/docs/src/index.js b/docs/src/index.js index 8116be0..3e9298b 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -3,6 +3,7 @@ import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import catButton from './components/catButton/catButton'; +import './element.css'; const components = [ catButton diff --git a/helper/README.md b/helper/README.md index 78043d4..61234e9 100644 --- a/helper/README.md +++ b/helper/README.md @@ -11,7 +11,7 @@

-### 🚀 好用小巧、功能全面的汉字拼音笔画 js 库 +### 🚀 功能全面、多端支持的汉字拼音笔画 js 库 **快速上手 | [在线试用/文档](https://theajack.gitee.io/cnchar) | [更新日志](https://github.com/theajack/cnchar/blob/master/helper/version.md) | [应用:打字游戏](https://theajack.gitee.io/type/) | [反馈错误/缺漏](https://github.com/theajack/cnchar/issues/new)** diff --git a/index.html b/index.html index b48b457..e86104b 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@