vue2-ui-t

1. 项目介绍

该项目是基于 Vue2 搭建的组件库文档，其中包含组件库的源码。

组件的说明文档是使用 markdown 语法进行书写的。 通过 webpack 的 loader 机制，编写了一个 markdown-loader， 作用是将.md文件转为.vue，之后在通过 vue-loader 进行解析。

本项目提供业务中常用的表单组件,包含组件源码和组件库文档源码。

2. 启动项目

$ yarn install
$ yarn dev

3. 项目结构介绍

┣ 📂loader # 用于将 md 文件转换成 SFC
┃ ┗ 📂md-loader
┃ ┃ ┣ 📜config.js ┃ ┃ ┣ 📜containers.js ┃ ┃ ┣ 📜fence.js
┃ ┃ ┣ 📜index.js ┃ ┃ ┗ 📜util.js ┣ 📂packages # 存放组件文件 ┃ ┣ 📂ATemplate # 组件模板 ┃ ┃ ┣ 📂src ┃ ┃ ┃ ┗ 📜index.vue
┃ ┃ ┗ 📜index.js ┃ ┣ 📂FormTable ┃ ┃ ┣ 📂src ┃ ┃ ┃ ┗ 📜index.vue ┃ ┃ ┗ 📜index.js ┃ ┗ 📜index.js ┣ 📂public ┃ ┣ 📜favicon.ico ┃ ┗ 📜index.html ┣ 📂src # 组件库文档的项目工程文件 ┃ ┣ 📂assets ┃ ┃ ┣ 📜fullScreen.png ┃ ┃ ┗ 📜logo.png ┃ ┣ 📂components ┃ ┃ ┣ 📜NavHeader.vue ┃ ┃ ┣ 📜demo-block.vue ┃ ┃ ┗ 📜side-nav.vue ┃ ┣ 📂docs # 组价的说明文档，用 md 编写 ┃ ┃ ┣ 📜aTemplate.md ┃ ┃ ┣ 📜formTable.md ┃ ┃ ┣ 📜guide.md ┃ ┃ ┣ 📜install.md ┃ ┃ ┗ 📜start.md ┃ ┣ 📂pages ┃ ┃ ┣ 📜homePage.vue ┃ ┃ ┗ 📜meTest.vue ┃ ┣ 📂router ┃ ┃ ┗ 📜index.js ┃ ┣ 📂store ┃ ┃ ┗ 📜index.js ┃ ┣ 📜App.vue ┃ ┣ 📜main.js ┃ ┗ 📜nav.config.js # 组件文档的路由 ┣ 📂utils ┃ ┗ 📜index.js ┣ 📂webpack # 打包时区分 lib 模式和文档模式 ┃ ┣ 📂utils ┃ ┃ ┗ 📜index.js ┃ ┣ 📜doc.config.js ┃ ┗ 📜lib.config.js ┣ 📜.DS_Store ┣ 📜.browserslistrc ┣ 📜.eslintrc.js ┣ 📜.gitignore ┣ 📜.npmrc ┣ 📜.prettierrc.json ┣ 📜Gulpfile.js # 用于自动化构建组件模板、文档路由等 ┣ 📜README.md ┣ 📜babel.config.js ┣ 📜jsconfig.json ┣ 📜lint-staged.config.js ┣ 📜logs.md ┣ 📜package.json ┣ 📜pnpm-lock.yaml ┣ 📜vue.config.js ┗ 📜yarn.lock

4. 新建组件流程

$ yarn run gulp

5. git 提交规范

1. 为了规范 git 提交，推荐 安装插件 git-commit-plugin 使用方式
2. 使用 commitizen 进行规范提交，在终端使用 git cz或cz命令进行提交 具体使用

6. 发布组件库

$ yarn run build:lib
$ npm login
$ npm publish

7. 部署组件库文档

$ yarn run build