比较说明

自己实现的；

跟v3版本主要的不同点：

• vue2 js中操作的语法；
• 组件样式直接写在vue代码中；
• 测试用例的方式引入vue方式；
• 文档库该用vuepress;
• 使用了demo-block组件；
• 文档中的引入组件示范格式不同；

组件的划分

以elementUi为基准划分为

• Basic:Icon图标、Button、Layout布局、container布局容器...
• Form: Input、Radio、checkbox、DatePicker、Upload...
• Data:Table、Tree、Pagination...
• Notice:Alert、Loading、Message...
• Navigation: Tabs、Dropdown、NavMenu...
• Others:Popover,Dialog、inifiniteScroll、Carousel...

搭建库文档

可能碰到的问题

全局引入组件库相关

搭建vuepress文档，想要在文档中展示我基于element ui写的组件demo，故创建文件enhanceApp.js

enhanceApp.js的配置如下

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import demos from '../../src/examples'
import Components from '../../src/packages'
//这个方法特别处理，不错的，推荐；
function parseComponentsName (name) {
  return 'rat' + name.replace(/[A-Z]/g, c => '-' + c.toLowerCase())
}
const install = function (Vue, options) {
  Object.keys(demos).forEach(name => {
    Vue.component(name, demos[name])
  })
  Object.keys(Components).forEach(name => {
    Vue.component(parseComponentsName(name), Components[name])
  })
}
export default ({
  Vue
}) => {
  Vue.use(ElementUI)
  Vue.use({install})
}

vuepress加载element-ui时报错Cannot find module ‘core-js/library/fn/object/assign

在中 (opens new window)发现，原来是element ui依赖core-js的2.x版本，而web项目依赖core-js的3.x版本导致的；

改core-js的版本是不可能的，安装依赖yarn add async-validator@1.11.5 / npm install async-validator@1.11.5就可以解决问题;

npx vuepress info，如果出现vue包版本不一致的问题，记得将版本安装一致;