element-ui分析

news2024/11/17 4:55:34

目录解析

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是如何生成文档的 这篇文章主要讲了怎么实现,值得一看!!

参考链接

掘金上写的非常好的文章

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CATIA Composer R2023安装教程

CATIA Composer R2023安装教程

软件下载 软件：CATIA Composer版本：2023语言：简体中文大小：1.82G安装环境：Win11/Win10/Win8/Win7硬件要求：CPU2.60GHz 内存8G(或更高）下载通道①百度网盘丨64位下载链接：https://pa…
阅读更多...
第三节 函数

第三节 函数

第三节 函数 目录 一． 函数是什么？二． C语言中函数的分类1. 库函数：2. 自定义函数 三． 函数的参数1. 实际参数（实参）：2. 形式参数（形参）： 四&…
阅读更多...
【计算机视觉】YOLO 入门：训练 COCO128 数据集

【计算机视觉】YOLO 入门：训练 COCO128 数据集

一、COCO128 数据集 我们以最近大热的YOLOv8为例，回顾一下之前的安装过程： %pip install ultralytics import ultralytics ultralytics.checks()这里选择训练的数据集为：COCO128 COCO128是一个小型教程数据集，由COCOtrain2017中…
阅读更多...
【pyqt5界面化工具开发-9】触发事件的绑定 信号-槽

【pyqt5界面化工具开发-9】触发事件的绑定 信号-槽

目录 0x00 前言： 一、基础代码布局 二、添加逻辑代码 三、触发事件绑定逻辑代码 0x00 前言： 1.信号(signal) 事件(点击、关闭等状态发生改变的触发事件) 2.槽( slot) 捕获信号后--->执行相应的逻辑代码 3.信号-槽 链接 为实现：触发事件…
阅读更多...
java-初识Servlet,Tomcat，JDBC

java-初识Servlet,Tomcat，JDBC

文章目录 前言一、ServletServlet 生命周期Servlet 实例Servlet 过滤器 二、TomcatJDBCJDBC连接数据库实例 总结 前言 java入门须知的重要概念/名词/技术 等 一、Servlet Servlet是Java Web开发中的一个核心组件，它是基于Java语言编写的服务器端程序，…
阅读更多...
【CI/CD技术专题】「Docker实战系列」本地进行生成镜像以及标签Tag推送到DockerHub

【CI/CD技术专题】「Docker实战系列」本地进行生成镜像以及标签Tag推送到DockerHub

背景介绍 Docker镜像构建成功后，只要有docker环境就可以使用，但必须将镜像推送到Docker Hub上去。创建的镜像最好要符合Docker Hub的tag要求，因为在Docker Hub注册的用户名是liboware，最后利用docker push命令推送镜像到公共仓库…
阅读更多...
2023视觉SLAM的研究改进方向

2023视觉SLAM的研究改进方向

1. 增加对动态场景的鲁棒性（动态SLAM） 传统的视觉SLAM算法通常假设场景是静态的，这种假设对于动态场景是不适用的。在动态场景中，物体的位置和姿态会发生变化，这会对视觉SLAM算法的精度和鲁棒性造成很大的影响。因此&…
阅读更多...
YOLOv5、YOLOv8改进：BoTNet Transformer

YOLOv5、YOLOv8改进：BoTNet Transformer

目录 1.简介 2.YOLOv5改进 2.1增加以下yolov5s_botnet.yaml文件 2.2common.py配置 2.3 yolo.py配置修改 1.简介 论文地址 Paper 本文提出的BoTNet是一种简单高效的网络，有效的将SA应用到多种视觉任务，如图像识别、目标检测、实例分割任务。通过将R…
阅读更多...
（十九）大数据实战——Flume数据采集框架安装部署

（十九）大数据实战——Flume数据采集框架安装部署

前言 本节内容我们主要介绍一下大数据数据采集框架flume的安装部署，Flume 是一款流行的开源分布式系统，用于高效地采集、汇总和传输大规模数据。它主要用于处理大量产生的日志数据和事件流。Flume 支持从各种数据源（如日志文件、消息队列、数…
阅读更多...
【C/C++】虚析构 | 抽象类

【C/C++】虚析构 | 抽象类

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…
阅读更多...
【核磁共振成像】并行采集MRI

【核磁共振成像】并行采集MRI

目录 一、并行成像二、SENSE重建三、SMASH重建四、灵敏度校准五、AUTO-SMASH和VD-AUTO-SMASH六、GRAPPA重建七、SPACE RIP重建算法八、PILS重建算法九、PRUNO重建算法十、UNFOLD算法 一、并行成像 并行MR成像(pMRI):相位阵列接受线圈不但各有自己专用的接受通道&#xff0c;而且…
阅读更多...
ChatGPT⼊门到精通(2):ChatGPT 能为我们做什么

ChatGPT⼊门到精通(2):ChatGPT 能为我们做什么

⼀、雇佣免费的⼲活⼩弟 有了ChatGPT后&#xff0c;就好⽐你有了好⼏个帮你免费打⼯的「⼩弟」&#xff0c;他们可以帮你做很多 ⼯作。我简单总结⼀些我⽬前使⽤过的⽐较好的基于ChatGPT的服务和应⽤。 1、总结、分析 当我们在阅读⼀些⽂章和新闻的时候&#xff0c;有的⽂章写…
阅读更多...
Redis-监听过期key-JAVA实现方案

Redis-监听过期key-JAVA实现方案

一、创建监听配置类 RedisListenerConfig。 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.d…
阅读更多...
mysql与msql2数据驱动

mysql与msql2数据驱动

mysql基本使用 数据库操作&#xff08;DDL&#xff09; -- 数据考操作 -- 1.查询所有数据库 SHOW DATABASES;-- 2.选择数据库 USE learn_mysql;-- 3.当前正在使用的数据库 SELECT DATABASE();-- 4.创建数据库 CREATE DATABASE IF NOT EXISTS learn_mysql;-- 5.删除数据库 DRO…
阅读更多...
贸易行业：财务信息化流程优化解决方案

贸易行业：财务信息化流程优化解决方案

一、整体架构图 1.1 价值分析 SAP财务流程优化V2.0版本 ——建立跨部门协作的“信息流”桥梁 &#xff0c;优化SAP与异构系统之间的数据交换 &#xff0c;信息传递由人工整理到EXCEL 到 系统导出 标准化EXCEL &#xff0c;提升作业人员数据整理、搬运的工作&#xff0c;提高…
阅读更多...
二级MySQL（十）——单表查询

二级MySQL（十）——单表查询

这里我们只在一个表内查询&#xff0c;用到的是较为简单的SELECT函数形式 1、查询指定的字段&#xff1a; 用到的数据库是之前提到的S、P、SP数据库 S表格用到的总数据&#xff1a; 首先我们查询所有供应商的序号和名字 这时都是独立的&#xff0c;没有关系&#xff0c;我们找…
阅读更多...
pm2部署nuxt3项目

pm2部署nuxt3项目

pm2部署nuxt3项目 阅读时长&#xff1a;8分钟 本文内容&#xff1a;本文其实前面开发AI数字人网站的延续。 window上安装ubuntu虚拟机&#xff0c;并在虚拟机中使用pm2部署 Nuxt3 项目. Nuxt3Vitetypescriptpm2 1. 安装node环境 下载 # 进入node目录 cd /node # 下载 wget h…
阅读更多...
input时间表单默认样式修改（input[type=“date“]）

input时间表单默认样式修改（input[type=“date“]）

一、时间选择的种类: HTML代码&#xff1a; <input type"date" value"2018-11-15" />选择日期&#xff1a; 选择时间&#xff1a; <input type"time" value"22:52" />在这里插入图片描述 选择星期&#xff1a; <…
阅读更多...
POSTGRESQL WAL 日志问题合集之WAL 如何解析

POSTGRESQL WAL 日志问题合集之WAL 如何解析

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请加 liuaustin3微信号 &#xff0c;在新加的朋友会分到3群 &#xf…
阅读更多...
Python实战之数据表提取和下载自动化

Python实战之数据表提取和下载自动化

在网络爬虫领域&#xff0c;动态渲染类型页面的数据提取和下载自动化是一个常见的挑战。本文将介绍如何利用Pyppeteer库完成这一任务&#xff0c;帮助您轻松地提取动态渲染页面中的数据表并实现下载自动化。 一、环境准备 首先&#xff0c;确保您已经安装了Python环境。接下来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023