0x.00 📢 前言
本文将介绍项目网站结构和文件功能。
项目工程化系列文章主要通过解析element项目源码，从结构、功能、源码方面逐一解析，学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。
👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。
1️⃣ 工程化剖析：项目概览、package.json、npm script
2️⃣ 工程化剖析：项目构建、MD解析
3️⃣ 工程化剖析：打包配置
4️⃣ 工程化剖析：发布部署、持续集成
5️⃣ 工程化剖析：主题构建、自动化测试、代码质量检查、类型声明
6️⃣ 工程化剖析：项目网站
7️⃣ 工程化剖析：命令之图解
本专栏的 gitbook 版本地址已经发布 📚《learning element-ui》 ，内容同步更新中！
0x.01 💻 项目网站
项目官网支持国际化支持四种语言，提供了指南（设计原则）、组件（文档功能展示）、主题（在线定制）、资源（Axure Sketch）等四大模块。
📁 examples 目录结构
组件库的网站项目存放在 examples 目录下，网站项目有两个入口，entry.js 和 play.js 。
待调整
接下来将详细介绍各文件和目录的功能。
👉 entry.js
网站项目的入口,配置和导入所需资源。
play.js & play/index.vue
组件库开发中的功能展示入口文件
该命令用于组件库开发中的功能展示。执行命令npm run dev:play，build/webpack.demo.js 打包入口文件examples/play.js, 引用 examples/play/index.vue, 可以引入组件库任意组件用于功能展示。
组件展示效果如下 👇。
nav.config.json
网站组件页面的左侧导航菜单多语言配置，菜单层级最深为3级，对应关系查看下图 👇。
创建新组件时， 运行build/bin/new.js文件更新 nav.config.json，添加新组件导航信息,更新至{"name": "组件","groups": [...]} 。
route.config.js
生成网站多语言路由配置。组件页面的左侧导航路由系统动态引入nav.config.json生成。
index.tpl & favicon.ico
webpack.demo.js 打包生成网站时页面依赖文件模板以及网站favicon。
📁 pages
网站页面模板文件存在examples/pages/template 目录下，以及各语言对应的网站文件。
通过运行脚本build/bin/i18n.js,基于 examples/i18n/page.json 和 examples/pages/template 目录下模版文件，生成对应语言的.vue文件 。
运行 build/bin/template.js 监听examples/pages/template目录下模板文件是否发生改变，若存在变化会自动执行命令npm run i18n，运行文件build/bin/i18n.js，重新生成网站文件。
📁 i18n
网站的国际化设置，支持语言和语言翻译文件。当使用 make new-lang fr指令添加新语言时，build/bin/new-lang.js 会将语言配置新增至 components.json、page.json、route.json等文件中 。
📁 docs
存放多语言组件文档，国际化默认支持四种语言,文档目录结构如下：
build\webpack.demo.js打包时通过路由配置(route.config.js)加载docs/{lang}/{component-name}.md文件，使用自定义的 markdown-loder进行处理，生成vue文件，渲染成页面。同时页面调用组件 components/demo-block.vue生成具有交互体验的组件Demo。
各组件文档无需手动创建，皆可自动创建(内容需要手动编辑)。当使用make new component-name指令创建新组件 package时，build/bin/new.js会自动创建多语言组件文档 examples/docs/{lang}/{component-name}.md。
当使用 make new-lang fr指令添加新语言时，build/bin/new-lang.js 会在 docs 下新建对应文件夹 examples/docs/{new-lang}。
📁 assets
静态资源目录,存放网站图片资源、公共样式、字体图标样式。
📁 components
用于网站页面公共组件，主要包含页眉(header) 、页脚/导航(footer footer-nav) 、 侧边导航(side-nav)、 搜索(search)。
用于主题查看、管理的组件
demo-block.vue
examples/components/demo-block.vue 在组件文档中解析中被调用生成生成具有交互体验的组件Demo。支持代码示例渲染、代码块语法高亮查看、codepen在线运行等功能。
📁 demo-style
组件文档页面中使用 components/demo-block.vue 组件的 demo 样式 。 总入口文件 examples/demo-styles/index.scss。
color.js
提供调整颜色的亮度方法 tintColor。Color色彩 页面 examples\docs\{lang}\color.md 引入方法用于生成调色板（Palette）。
根据主色生成不同亮度的色彩，效果如下 👇。
versions.json
由 build/bin/version.js 生成。examples\components\header.vue 用于组件页面头部导航的版本选择。
dom/class.js
定义了 dom class 操作方法 。
extension
用于构建名为Element Theme Roller的 chorme 插件项目。
- 调用命令：
webpack --config build/webpack.extension.js。 - 入口文件：
examples/extension/src/background.js和examples/extension/src/entry.js。 - 输出文件：构建内容输出至
examples/extension/dist目录下。生成文件background.jsentry.js,复制文件icon.pngmanifest.json。
element-ui
项目静态网站打包输出目录。
0x.02 🎉 总结
工程化系列此刻已经完结。十分感谢 element-ui团队，贡献出这么优秀的开源软件，不仅简化了日常开发内容，而且提供了如此优秀的学习案例。
第一次系统性编写长篇技术博文，挑战蛮大的，从构思到落笔成文跨度两个月之久。期间纠结于术语名词不能混淆；语言组织怎么通俗易懂；如何能深入浅出，不废话连篇。总之一路磕磕绊绊走了过来，完成自己的目标--回顾自己，分享自己🎉🎊✨。
本人知识水平有限，文中存在错误疏漏在所难免！请大家在文章评论中及时反馈！
最后感谢大家愿意花费时间来阅读拙文，希望能对您带来帮助和收获，这也是写博文分享的目的。
--end--
📚参考&关联阅读
ant.design/docs/spec/c…
zhuanlan.zhihu.com/p/32422584
www.douban.com/note/695528…
关注专栏
如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐！您的认可就是对我的最大支持！
此文章已收录到专栏中 👇，可以直接关注。
