ElementUI源码系列六 - 小结

写在开头

首先，如果你是从系列开头第一篇文章一篇一篇顺序看到这一篇文章，那么小编恭喜你，也感谢你，因为你足足读完了共一万字的文章，当然，也再次谢谢你对小编文章的喜爱，希望这系列文章对你能有一点微不足道的帮助，那我也心满意足了。O(∩_∩)O

其次，前面写完了五篇文章，这是第六篇文章，而这一篇文章是一篇总结文，主要是总结一下前五篇文章学到的所有知识点，顺便也理理文章的思路，希望能对你有更进一步的帮助。

最后，我们透露一下接下来三篇文章的主题：组件按需加载、搭建在线预览文档、带你从零实现一个高质量组件-Select。

好了，下面开始本篇的内容再说吧。

第一篇

第一篇文章 ElementUI源码系列一 - 从零搭建项目架构，项目准备、项目打包、项目测试流程 中，我们学到的知识点主要有这几个：

• 构建项目的基本目录结构。
• 使用 webpack 对项目进行打包：
  • 要引入 webpack 打包，我们需要下载 webpack 和 webpack-cli 两个包。
  • 处理 .vue 文件，又会用到 vue-loader 和 vue-template-compiler 两个包。
• 介绍两种测试项目的方式：
  • 把项目打包成本地npm包进行测试：主要过程是先修改项目的 package.json 文件的 main 配置项，定位到打包后生成的入口文件；然后执行 npm pack 打包生成 tgz 包；最后在新项目中下载 npm install 本地放置tgz包的全路径 即可模拟上传 npm 的实际场景。
  • html文件快速测试.vue文件：这种其实更适用于编写组件样式的时候使用，它主要利用了 http-vue-loader 这个包来完成。需要我们把组件的 .vue 文件 export default 改成 module.exports = {} 形式，然后在 .html 中引入使用，最后运行 .html 文件，必须以在服务器形式运行。

第二篇

第二篇文章 ElementUI源码系列二 - 引入scss，用gulp把scss转成css并补全、压缩，用cp-cli移动目录、文件 中，我们学到的知识点主要有这几个：

• 使用 CSS 预处理器中的 scss 语言来编写组件样式。
• 学习使用 gulp 来处理 scss 样式转成 css ，主要会用到以下几个包：
  • gulp：一种自动化构建工具，和我们熟知的 webpack 很相似，但它更纯粹一些，它基于 Node 流的能力去构建任务流，某些方面上更具性能优势，我们会采取它来处理 .scss 文件。
  • gulp-autoprefixer：由它的名字大概也能猜出它的作用了，用于自动补全 CSS 前缀的插件。
  • gulp-cssmin：用于压缩 CSS。
  • gulp-sass：编译 scss，转成 CSS。

第三篇

第三篇文章 ElementUI源码系列三 - 学习gen-cssfile.js文件之自动创建组件的.scss文件与生成index.scss文件内容 中，我们学到的知识点主要有这几个：

• 学习 element-ui 源码下 build/bin/gen-cssfile.js 文件的内容，之所以要学习它，是因为当我们创建一个新组件的时候，要经历三个步骤：

  • 第一步 - 创建组件目录结构
  • 第二步 - 创建组件样式文件
  • 第三步 - 总入口文件引入组件

  而在第二步骤为新组件创建样式文件的时候，都要经历一个创建组件 .scss 文件与引入组件样式的两个过程，为了应对将来项目可能会有大量组件，我们使用 Node 将这两个过程进行了一个自动化。

• 学习 fs.writeFileSync('文件路径', '文件内容', '文件编码/错误回调'); 这个 API 的使用。

• 初识组件的配置文件 components.json 文件。

第四篇

第四篇文章 ElementUI源码系列四 - 学习new.js文件之自动创建组件目录结构与生成components.json文件内容 中，我们学到的知识点主要有这几个：

• 学习 element-ui 源码下 build/bin/new.js 文件的内容，学习它是因为每个组件的目录结构是差不多的，为了方便我们创建一个新组件的目录，避免手工创建，我们也对组件的目录进行了自动化创建的操作。其实它是对上面提到的创建组件要经历三个步骤中的第一步进行自动化。
• 学习用 process 模块的 .argv 属性获取命令行的参数情况。
• 使用 file-save 模块让创建文件与写入文件内容的操作变的更方便。
• 使用 uppercamelcase 模块把破折号/点/下划线/空格分隔的字符串转换为驼峰形式。
• 学习自动生成组件配置文件 components.json 的内容。
• 使用 JSON.stringify(value[, replacer [, space]]) 第三个参数格式化 .json 文件格式形式。

第五篇

第五篇文章 ElementUI源码系列五 - 学习build-entry.js文件之自动生成总入口文件index.js内容 中，我们学到的知识点主要有这几个：

• 学习 element-ui 源码下 build/bin/build-entry.js 文件的内容，学习它是因为一个新组件的创建要经历三个操作步骤，而前两篇文件中对第一、第二步骤做了自动化了，第三步骤肯定也跑不了。
• 这一章最重要的是学习 json-templater 模块，它是一个字符串模板生成器，用它能帮助我们更加快速、便捷的生成好字符串模板。
• 当然，还有其他小知识点，比如换行符的兼容问题、推导一个文件的字符串模块等等。

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。

老样子，点赞+评论=你会了，收藏=你精通了。