element-ui分析

目录解析

element
├── github // 存放了elementui贡献指南，issue 和 PR模板
├── build // 存放打包相关的配置文件
├── examples // 组件相关示例demo
├── packages // 组件源码
├── src // 存放入口文件和一些工具辅助函数
├── test // 单元测试相关
├── types // 类型声明文件
├── .travis.yml // 持续集成(CI)的配置文件
├── CHANGELOG.en-US.md
├── CHANGELOG.es.md
├── CHANGELOG.fr-FR.md
├── CHANGELOG.zh-CN.md // 更新日志 总共4种语言
├── components.json // 标明了组件的文件路径
├── element_logo.svg
├── FAQ.md // 开发者问答
├── LICENSE // 开源许可证 elementui是MIT协议
├── Makefile Makefile // 是一个适用于 C/C++ 的工具，在拥有 make 环境的目录下， 
												// 如果存在一个 Makefile 文件。 那么输入 make 命令将会执行 Makefile 文件中的某个目标命令。
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock

从package.json聊起

{
  "name": "element-ui",
  "version": "2.14.1",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js", // 入口文件
  "files": [ // 指定npm publish发包时需要包含的文件/目录。
    "lib",
    "src",
    "packages",
    "types"
  ],
  "typings": "types/index.d.ts", // TypeScript入口文件。
  "scripts": { // 脚本命令
    "bootstrap": "yarn || npm i", 
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    // 
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
    "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
  },
  "faas": [
    {
      "domain": "element",
      "public": "temp_web/element"
    },
    {
      "domain": "element-theme",
      "public": "examples/element-ui",
      "build": [
        "yarn",
        "npm run deploy:build"
      ]
    }
  ],
  "repository": { // git仓库地址
    "type": "git",
    "url": "git@github.com:ElemeFE/element.git"
  },
  "homepage": "http://element.eleme.io", // 项目的线上地址
  "keywords": [
    "eleme",
    "vue",
    "components"
  ],
  "license": "MIT", // 开源许可证
  "bugs": {
    "url": "https://github.com/ElemeFE/element/issues"
  },
  "unpkg": "lib/index.js", // cdn地址文件入口
  "style": "lib/theme-chalk/index.css", // 声明样式入口文件
  "dependencies": {
  },
  "peerDependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
  	// ...
  }
}

特殊命令解析

bootstrap 引导安装包

引导安装包

build:file 生成入口文件

  1. node build/bin/iconInit.js

用于生成../../examples/icon.json,解析icon.scss, 把所有的icon的名字放在icon.json里面,遍历名字显示icon(不用每次添加了icon就要修改example)

  1. node build/bin/build-entry.js

主要用于生成 /src/index.js入口文件.

  1. node build/bin/i18n.js

根据 examples/i18n/page.json 和模版，生成不同语言的 demo

  1. node build/bin/version.js

根据package.json中的version和历史版本,生成examples/versions.json，对应就是完整的版本列表

build:theme 处理样式

  1. node build/bin/gen-cssfile

这一步是根据components.json，生成package/theme-chalk/index.scss文件，把所有组件的样式都导入到index.scss。相当于自动导入所有组件的样式文件到index.scss中 再也不用手动操作啦

  1. gulp build --gulpfile packages/theme-chalk/gulpfile.js

通过gulp将theme-chalk下的所有scss文件编译为css

  1. cp-cli packages/theme-chalk/lib lib/theme-chalk

cp-cli是一个跨平台的copy工具

将 packages/theme-chalk/lib 复制到 lib/theme-chalk

build:utils 编译工具

cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js

把src目录下的除了index.js入口文件外的其他文件通过babel转译，然后移动到lib文件夹下。

build:umd 生成umd模块的语言包

node build/bin/build-locale.js

生成umd模块的语言包。

clean 清除打包文件

rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage

删除打包生成的文件

deploy:build

npm run build:file 生成入口文件

cross-env NODE_ENV=production webpack --config build/webpack.demo.js  处理markdown文件

 echo element.eleme.io>>examples/element-ui/CNAME : 向CNAME中写入一些东西

deploy:extension

cross-env NODE_ENV=production webpack --config build/webpack.extension.js

dev:extension

rimraf examples/extension/dist

cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js

dev 开启开发模式

开启开发模式，在启动后可以在浏览器打开本地的elementUI的实例官网

npm run bootstrap 引导安装包

npm run build:file 生成入口文件

cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js  处理markdown

& node build/bin/template.js 监听examples/pages/template改变时执行npm run i18n, & 表示与前几个脚本是并发执行的.

dev:play 开启某个组件的开发模式

开启某个组件的开发模式，在这里可以单独开发某个组件，目录examples/play/index.vue

与 dev 相比少了安装的步骤，以及后面的 template.js的构建，多了个 PLAY_ENV=true, 在webpack.demo.js中会处理

npm run build:file 生成入口文件

cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js

dist 打包生成最终的代码

npm run clean 清除打包文件

npm run build:file 生成入口文件

npm run lint  格式化

webpack --config build/webpack.conf.js 生成umd格式的js文件（index.js）

webpack --config build/webpack.common.js  生成commonjs格式的js文件

webpack --config build/webpack.component.js  以components.json为入口，将每一个组件打包生成一个文件，用于按需加载

npm run build:utils

npm run build:umd 

npm run build:theme

i18n 多语言处理

node build/bin/i18n.js 国际化处理

lint 格式化

eslint src/**/* test/**/* packages/**/* build/**/* --quiet

不必多说 格式化

pub 发布

npm run bootstrap 引导安装包

sh build/git-release.sh 进行dev分支git冲突检测

sh build/release.sh 发布

node build/bin/gen-indices.js 

sh build/deploy-faas.sh

test 测试用例

执行测试用例

npm run lint 

npm run build:theme 

cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

test:watch

执行测试用例 代码改变自动执行

npm run build:theme 

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js

特殊文件夹说明

components.json

里面记录着所有组件的文件位置,根据这个文件来自动化生成一些配置文件(比如注册组件 样式文件入口生成)

packages

所有的组件都在这里了

packages/theme-chalk

这里面存放的就是所有组件相关的样式. index.scss 用于全局引入,其他是每个组件的样式(按需引入时会用到)

src

src/index.js 把所有的组件统一导出. (这个index.js 是通过node build/bin/build-entry.js生成的),通过脚本命令去生成,不用每次新增一个组件就修改一下.

其余时一些公共方法啦

examples

存放了组件示例. 组件示例是通过markdown来编写的,最后通过build/md-loader下的脚本来生成html

element是如何生成文档的 这篇文章主要讲了怎么实现,值得一看!!

参考链接

掘金上写的非常好的文章

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/101199.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Go 基础篇】Go语言结构体详解：打开自定义类型的大门

【Go 基础篇】Go语言结构体详解：打开自定义类型的大门

嗨，Go语言学习者们！在编程的世界里，数据是核心，而结构体（Struct）是一种能够帮助我们更有组织地存储和操作数据的重要工具。在本篇博客中，我们将深入探讨Go语言中结构体的概念、定义、初始化、嵌…
阅读更多...
Docker修改容器ulimit的全部方案及各方案的详细步骤

Docker修改容器ulimit的全部方案及各方案的详细步骤

要修改Docker容器的ulimit（用户资源限制），有以下三种方案，每个方案的详细步骤如下： 方案一：在Dockerfile中设置ulimit 打开您的Dockerfile。在文件中添加以下命令来修改ulimit：RUN ulimit -n …
阅读更多...
Go的基础运行方式和打包

Go的基础运行方式和打包

目录 基础运行方式导入路径 打包技巧相关知识点 基础运行方式 // 文件名可以不是main，但包名和入口函数比如是main // main.go package main // 导入包的时候可以直接导入，也可以导入后指定包名， import ("fmt"godemo "githu…
阅读更多...
Tauri打包windows应用配置中文界面

Tauri打包windows应用配置中文界面

使用 Tauri Rust 开发桌面应用，在 windows 系统上，打包后安装包名称后缀、安装界面、相关说明默认都是英文的。如果要默认显示为中文，则需要在 tauri.conf.json 中配置相应参数。 前言 默认情况下，在 windows 系统打完的 mis 包…
阅读更多...
低代码的探索之路

低代码的探索之路

Gartner发布报告指出，2023年全球低代码开发平台市场规模将达到345亿美元，比2022年增长20%。 目前，国内外已经有许多低代码平台，包括OutSystems、Mendix、Appian、Microsoft Power App等。这些平台提供了丰富的功能和工具&#xff…
阅读更多...
无涯教程-JavaScript - PERCENTILE函数

无涯教程-JavaScript - PERCENTILE函数

PERCENTILE函数替代Excel 2010中的PERCENTILE.INC函数。 描述 该函数返回范围中值的第k个百分位数。您可以使用此功能建立接受阈值。 语法 PERCENTILE (array,k)争论 Argument描述Required/OptionalArrayThe array or range of data that defines relative standing.Requi…
阅读更多...
如何使用C++11原子操作实现自旋锁

如何使用C++11原子操作实现自旋锁

什么是自旋锁？ C自旋锁是一种低层次的同步原语，用于保护共享资源的访问。自旋锁是一种轻量级的锁，适用于短时间的资源锁定。 自旋锁的特点：当一个线程尝试获取已经被另一个线程占有的自旋锁时，这个线程会进入一个循环…
阅读更多...
【前端入门案例1】HTML + CSS

【前端入门案例1】HTML + CSS

案例一 <!DOCTYPE html> <html lang"en-US"><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width"><title>My test page</title> </head><body><…
阅读更多...
图：有向无环图（DAG）

图：有向无环图（DAG）

1.有向无环图的定义 有向无环图:若一个有向图中不存在环&#xff0c;则称为有向无环图。 简称DAG图(Directed Acyclic Graph) 顶点中不可能出现重复的操作数。 2.有向无环图的应用 1.描述算数表达式 用有向无环图描述算术表达式。 解题步骤&#xff1a; 把各个操作数不重…
阅读更多...
springboot web开发整合Freemarker 模板引擎

springboot web开发整合Freemarker 模板引擎

目录 Freemarker添加依赖配置文件ymlcontrollerhtml Freemarker 简介&#xff1a; FreeMarker 是一款 模板引擎&#xff1a; 即一种基于模板和要改变的数据&#xff0c; 并用来生成输出文本(HTML网页&#xff0c;电子邮件&#xff0c;配置文件&#xff0c;源代码等)的通用工具…
阅读更多...
详解 Vue 3 使用了 Proxy 对象来替代 Vue 2 中的 Object.defineProperty

详解 Vue 3 使用了 Proxy 对象来替代 Vue 2 中的 Object.defineProperty

在 Vue 2 中&#xff0c;响应式系统使用了 Object.defineProperty 来实现属性的劫持和监听。这种方式需要在对象上定义 getter 和 setter&#xff0c;以便在属性被访问或修改时触发相应的操作。 然而&#xff0c;Object.defineProperty 有一些限制和性能问题。它只能劫持对象的…
阅读更多...
mysql‘逻辑删除‘和‘唯一索引‘冲突的解决方案

mysql‘逻辑删除‘和‘唯一索引‘冲突的解决方案

一、冲突出现原因 在user表中将name字段设置唯一索引&#xff0c;添加逻辑删除字段del_flag&#xff08;1为删除&#xff0c;0为未删除&#xff09;之后&#xff0c;将name张四的字段删除&#xff0c;再添加一个name张四的记录则会出现冲突 二、解决 1.设置唯一索引组&#x…
阅读更多...
【深度学习】ChatGPT

【深度学习】ChatGPT

本文基于Andrej Karpathy(OpenAI 联合创始人&#xff0c;曾担任特斯拉的人工智能和自动驾驶视觉主管)在Microsoft Build 2023上的演讲整理而成&#xff08;完整的视频在文末&#xff0c;直接拖到文章底部&#xff09;&#xff0c;主要分为2大部分&#xff1a; 1.如何训练GPT(可…
阅读更多...
前后端项目部署上线详细笔记

前后端项目部署上线详细笔记

部署 参考文章&#xff1a;如何部署网站&#xff1f;来比比谁的方法多 - 哔哩哔哩大家好&#xff0c;我是鱼皮&#xff0c;不知道朋友们有没有试着部署过自己开发的网站呢&#xff1f;其实部署网站非常简单&#xff0c;而且有非常多的花样。这篇文章就给大家分享几种主流的前端…
阅读更多...
六、Kafka-Eagle监控

六、Kafka-Eagle监控

目录 6.1 MySQL 环境准备6.2 Kafka 环境准备6.3 Kafka-Eagle 安装 6.1 MySQL 环境准备 Kafka-Eagle 的安装依赖于 MySQL&#xff0c;MySQL 主要用来存储可视化展示的数据 6.2 Kafka 环境准备 修改/opt/module/kafka/bin/kafka-server-start.sh 命令 vim bin/kafka-server-sta…
阅读更多...
VBA_MF系列技术资料1-172

VBA_MF系列技术资料1-172

MF系列VBA技术资料 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-04属于定…
阅读更多...
《Flink学习笔记》——第一章 概念及背景

《Flink学习笔记》——第一章 概念及背景

​ 什么是批处理和流处理&#xff0c;然后由传统数据处理架构为背景引出什么是有状态的流处理&#xff0c;为什么需要流处理&#xff0c;而什么又是有状态的流处理。进而再讲解流处理的发展和演变。而Flink作为新一代的流处理器&#xff0c;它有什么优势&#xff1f;它的相关背…
阅读更多...
渗透测试漏洞原理之---【任意文件上传漏洞】

渗透测试漏洞原理之---【任意文件上传漏洞】

文章目录 1、任意文件上传概述1.1、漏洞成因1.2、漏洞危害 2、WebShell解析2.1、Shell2.2、WebShell2.2.1、大马2.2.2、小马2.2.3、GetShell 3、任意文件上传攻防3.1、毫无检测3.1.1、源代码3.1.2、代码审计3.1.3、靶场试炼 3.2、黑白名单策略3.2.1、文件检测3.2.2、后缀名黑名…
阅读更多...
经纬恒润荣获吉利汽车“最佳价值贡献”奖

经纬恒润荣获吉利汽车“最佳价值贡献”奖

8月18日&#xff0c;以“全面向新 共创共赢”为主题&#xff0c;吉利汽车在宁波成功举行2023年电子电器核心供应商恳谈会。经纬恒润凭借在项目合作上持续创新、高效协同等优异表现&#xff0c;获得“最佳价值贡献”奖项。 作为国产汽车代表性品牌之一&#xff0c;吉利汽车积极推…
阅读更多...
单元测试及其工具Junit

单元测试及其工具Junit

1.单元测试是什么 单元测试是开发者编写的一小段代码&#xff0c;用于检验被测代码的一个很小的、很明确的功能是否正确&#xff0c;通常而言&#xff0c;一个单元测试是用于判断某个特定条件&#xff08;或者场景&#xff09;下某个特定函数的行为。 单元测试是软件测试的一种…
阅读更多...
最新文章

Copyright @ 2022~2023