06.Element UI 项目工程化剖析之项目网站

1,730 阅读5分钟

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)等四大模块。

image.png

📁 examples 目录结构

组件库的网站项目存放在 examples 目录下,网站项目有两个入口,entry.jsplay.js 。 待调整

image.png

接下来将详细介绍各文件和目录的功能。

👉 entry.js

网站项目的入口,配置和导入所需资源。

carbon (52).png

play.js & play/index.vue

组件库开发中的功能展示入口文件 该命令用于组件库开发中的功能展示。执行命令npm run dev:playbuild/webpack.demo.js 打包入口文件examples/play.js, 引用 examples/play/index.vue, 可以引入组件库任意组件用于功能展示。

image.png

组件展示效果如下 👇。

image.png

nav.config.json

网站组件页面的左侧导航菜单多语言配置,菜单层级最深为3级,对应关系查看下图 👇。

image.png

创建新组件时, 运行build/bin/new.js文件更新 nav.config.json,添加新组件导航信息,更新至{"name": "组件","groups": [...]}

route.config.js

生成网站多语言路由配置。组件页面的左侧导航路由系统动态引入nav.config.json生成。 image.png

index.tpl & favicon.ico

webpack.demo.js 打包生成网站时页面依赖文件模板以及网站favicon。

image.png

📁 pages

网站页面模板文件存在examples/pages/template 目录下,以及各语言对应的网站文件。

image.png

通过运行脚本build/bin/i18n.js,基于 examples/i18n/page.jsonexamples/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.jsonpage.jsonroute.json等文件中 。

image.png

📁 docs

存放多语言组件文档,国际化默认支持四种语言,文档目录结构如下:

image.png

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

静态资源目录,存放网站图片资源、公共样式、字体图标样式。

image.png

📁 components

用于网站页面公共组件,主要包含页眉(header) 、页脚/导航(footer footer-nav) 、 侧边导航(side-nav)、 搜索(search)。

image.png

用于主题查看、管理的组件

image.png

demo-block.vue

examples/components/demo-block.vue 在组件文档中解析中被调用生成生成具有交互体验的组件Demo。支持代码示例渲染、代码块语法高亮查看、codepen在线运行等功能。

a_gaitubao_662x373.png

📁 demo-style

组件文档页面中使用 components/demo-block.vue 组件的 demo 样式 。 总入口文件 examples/demo-styles/index.scss

color.js

提供调整颜色的亮度方法 tintColorColor色彩 页面 examples\docs\{lang}\color.md 引入方法用于生成调色板(Palette)。

image.png

根据主色生成不同亮度的色彩,效果如下 👇。

image.png

versions.json

build/bin/version.js 生成。examples\components\header.vue 用于组件页面头部导航的版本选择。

image.png

dom/class.js

定义了 dom class 操作方法 。

image.png

extension

用于构建名为Element Theme Roller的 chorme 插件项目。

  • 调用命令:webpack --config build/webpack.extension.js
  • 入口文件:examples/extension/src/background.jsexamples/extension/src/entry.js
  • 输出文件:构建内容输出至examples/extension/dist目录下。生成文件 background.js entry.js ,复制文件 icon.png manifest.json

element-ui

项目静态网站打包输出目录。

0x.02 🎉 总结

工程化系列此刻已经完结。十分感谢 element-ui团队,贡献出这么优秀的开源软件,不仅简化了日常开发内容,而且提供了如此优秀的学习案例。

第一次系统性编写长篇技术博文,挑战蛮大的,从构思到落笔成文跨度两个月之久。期间纠结于术语名词不能混淆;语言组织怎么通俗易懂;如何能深入浅出,不废话连篇。总之一路磕磕绊绊走了过来,完成自己的目标--回顾自己,分享自己🎉🎊✨。

本人知识水平有限,文中存在错误疏漏在所难免!请大家在文章评论中及时反馈!

最后感谢大家愿意花费时间来阅读拙文,希望能对您带来帮助和收获,这也是写博文分享的目的。

--end--

📚参考&关联阅读

ant.design/docs/spec/c…
zhuanlan.zhihu.com/p/32422584
www.douban.com/note/695528…

关注专栏

如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐!您的认可就是对我的最大支持!

此文章已收录到专栏中 👇,可以直接关注。