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.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…
关注专栏
如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐!您的认可就是对我的最大支持!
此文章已收录到专栏中 👇,可以直接关注。