序言

上一篇文章我们主要分析了Element-ui打包构建之类的命令，这一篇的主要来分析的就是Element-ui整体的目录结构吧，在阅读源码的时候清楚明白每个目录的工作 对于咱们阅读和学习都有很大的帮助。 感谢element团队

目录结构

源码开发包目录结构

element
    ├──.github                
    ├── build                  // webpack编译配置文件等
         ├── bin               // 上一篇文章分析的脚本命令
    ├── examples               // 官方主页项目包
    ├── lib                    // 打包后文件目录
    ├── node_modules           // 模块依赖目录
    ├── packages               // 组件的源码目录
        ├── alert              // 具体组件源码包
            ├── src            // Vue组件包
            ├── index.js       // 入口文件
    ├── src                    // 源码目录
        ├── directive          // 实现滚轮优化，鼠标点击优化
        ├── locale             // i18n国际化
        ├── mixins             // Vue混合器
        ├── transition         // 样式过渡效果
        ├── utils              // 工具类包
        ├── index.js           // 源码入口文件
    ├── test                   // 测试目录
        ├── unit               // 单元测试目录
            ├── coverage       // 单元测试覆盖率包
            ├── specs          // 测试用例源码包
            ├── index.js       // 测试入口
            ├── karma.conf.js  // karma配置文件
            ├── utils.js       // 工具类
    ├── types                  // typescript文件包
    ├── .babelrc               // babel配置文件
    ├── .eslintignore          // eslint配置忽略文件
    ├── .eslintrc              // eslint配置
    ├── .gitignore             // git忽略文件
    ├── .travis.yml            // 持续构建配置
    ├── package.json           // npm包核心文件
    ├── components.json        // 组件列表json
    ├── yarm.lock              // yram版本控制文件
    ├── package-lock.json      // npm包版本控制文件
    ├── postcss.config.js      // postcss配置文件

build：脚本命令

examples：存放 ElementUI 组件示例。

packages：存放组件源码，也是之后源码分析的主要目标。

src：存放入口文件以及各种辅助文件。

src/directives：放置自定义指令。

src/locale：放置语言的配置文件。

src/mixins：放置组件用的混合文件。

src/transitions：放置动画配置文件。

src/utils：放置用到工具函数文件。

src/index.js：组件注册的入口文件。

test：存放单元测试文件，合格的单元测试也是一个成熟的开源项目必备的。

types：存放声明文件，方便引入 typescript 写的项目中，需要在 package.json 中指定 typing 字段的值为 声明的入口文件才能生效。

看了源码的目录结构后,我们再来看看打包后的项目,也就是咱们平时用的element-ui目录结构是如何的?

发布版本包目录结构

element-ui
    ├── lib                    // 打包后文件目录
    ├── packages               // 组件的源码目录
        ├── alert              // 具体组件源码包
            ├── src            // Vue组件包
            ├── index.js       // 入口文件
    ├── src                    // 源码目录
        ├── directive          // 实现滚轮优化，鼠标点击优化
        ├── locale             // i18n国际化
        ├── mixins             // Vue混合器
        ├── transition         // 样式过渡效果
        ├── utils              // 工具类包
        ├── index.js           // 源码入口文件
    ├── types                  // typescript文件包
    ├── package.json           // npm包核心文件

以上就是简单的Element的目录结构了

莫文蔚的阴天，孙燕姿的雨天，周杰伦的晴天，都不如你来我们公司和我聊聊天。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！
欢迎大家来聊，有意向可发送简历到chen_zhen@dahuatech.com

学而不思则罔,思而不学则殆 ———— 无奖竞猜