1.vue-template-compilerï¼
2.elementui源码学习之仿写一个el-timeline
3.dayjs源码解析(一):概念、饿网locale、站源constant、码饿utils tags
vue-template-compilerï¼
vueæä¹è§£å³
ä½ å¥½ï¼
æ¥éåå ï¼é常åºç°äºä¸äºä¾èµåºçæ´æ°æè å®è£ æ°çä¾èµåºä¹å(å¯ä»¥è®¤ä¸ºnpmupdateå·²ç»æ为ä¸ç§ä¹ æ¯)ï¼å¯¼è´äºvueåvue-template-compilerççæ¬ä¸ä¸è´ã
解å³æ¹æ¡ï¼ç»ä¸vueåvue-template-compilerççæ¬
1"vue":"2.3.4",
2"vue-template-compiler":"2.3.4",
ï¼æ³¨ï¼å¦ä¸æ示çæ¬å·åä¸ºæ ·ä¾ï¼å ·ä½å®ç°è¯·å°ä¼ä¼´ä»¬æ ¹æ®èªå·±ççæ¬å·å¯¹åºï¼
ç¶åæ§è¡ï¼npmupdateå°±å¯ä»¥äºã
éå ï¼
è¥ä¸è¿°æ¹æ³æªè§£å³é®é¢ï¼åå¯è½æ¯å 为åä¾èµåºä¹é´äº§çäºå²çªï¼è¿éæ们ä¹ææ´æ´åç解å³æ¹æ³ã
é¦å æ¥ç项ç®æ ¹ç®å½ä¸æ¯å¦çæè¿package-lock.jsonçæ件ï¼è¥æï¼å ä¹ã
ç¶åå é¤æ´ä¸ªnode_modulesç®å½ï¼éæ°é ç½®package.json(å½ç¶ï¼è¦è®°å¾ç»ä¸vueåvue-template-compilerççæ¬)
é 置好ä¹åéæ°æ§è¡ï¼npminstallï¼
OKï¼é®é¢è§£å³ã
element饿äºä¹çvueæ¡æ¶ï¼è¿è¡æ¥é已解å³ï¼Vue2.1.5å°_héå½å为_cï¼èElementç®ååççæ¬é½æ¯ç¨ä»¥åçcompilerç¼è¯çï¼å¯¼è´æ°çruntimeæ æ³è¿è¡Elementãç®åç解å³æ¹æ¡æ¯éå®Vueççæ¬ä¸º2.1.4
éå®vueç¸å ³çæ¬
#éæ°å®è£ ä¸ä¸çæ¬
"vue-template-compiler":"2.1.4"
"vue-loader":".0.0"
"vue":"2.1.4"
å ·ä½å½ä»¤å¦ä¸ï¼
npmremove#å¸è½½æ个çæ¬
npmremovevue
npmremovevue-template-compiler
npmremovevue-loader
npminstallvue@2.1.4#å®è£ æå®çæ¬
npminstallvue-template-compiler@2.1.4
npminstallvue-loader@.0.0
-æä¹è®©vueæå çæ¶åç¦ç¨angularç±äºæå å®æåï¼åéæ æ³ä½¿ç¨
æå°è¯è¿æ ·åï¼ä»¥åvue-cli3çåæ³ï¼é½æ æ³åå°ç¦ç¨ä¸¥æ ¼æ¨¡å¼
image.png
package.json
"devDependencies":{
"@vue/cli-plugin-babel":"~4.5.0",
"@vue/cli-plugin-eslint":"~4.5.0",
"@vue/cli-plugin-router":"~4.5.0",
"@vue/cli-plugin-vuex":"~4.5.0",
"@vue/cli-service":"~4.5.0",
"babel-eslint":"^.1.0",
"babel-plugin-transform-remove-console":"^6.9.4",
"copy-webpack-plugin":"^4.0.1",
"electron":"^9.0.0",
"electron-devtools-installer":"^3.1.0",
"eslint":"^6.7.2",
"eslint-plugin-vue":"^6.2.2",
"sass":"^1..5",
"sass-loader":"^8.0.2",
"svg-sprite-loader":"^6.0.",
"vue-cli-plugin-electron-builder":"~2.0.0",
"vue-template-compiler":"^2.6.",
"webpack-bundle-analyzer":"^3.9.0"
},
"eslintConfig":{
"globals":{
"__static":true
},
"root":true,
"env":{
"node":true
},
"extends":[
"plugin:vue/essential",
"eslint:recommended",
"plugin:vue/recommended"
],
"parserOptions":{
"parser":"babel-eslint"
},
"rules":{ }
}
å¯ä»¥ä½¿ç¨replace-in-fileå ¨å±æ¿æ¢æ"usestrict"å符串
ä¸¥æ ¼æ¨¡å¼ä¸éä¸¥æ ¼æ¨¡å¼
æå¨IEæµè§å¨ä¸,使ç¨strict模å¼.åç°,ä¸¥æ ¼æ¨¡å¼ä¸,ä¸å 许ä¸ä¸ªå±æ§å¤å¤å®ä¹çé误æ示,è¿ä¸ªæä¹è§£å³?
JavaScriptä¸¥æ ¼æ¨¡å¼
JavaScriptçä¸¥æ ¼æ¨¡å¼è¯¥æä¹ç解ï¼ä»å¤©çäºes6ï¼å讲å°ä¸¥æ ¼æ¨¡å¼ä½æä¸ç´ä¸ç解ï¼ä¸¥æ ¼æ¨¡å¼æ¯å¹²å¥ç(=_=)
vueä¸å¦ä½ç¦ç¨ES6ä¸¥æ ¼æ¨¡å¼ã
vue项ç®ä¸å¼ç¨å¤é¨çjsæ件ä¹åï¼æ¥éå¦ä¸ï¼è¯·é®æä¹è§£å³ï¼
nuxtæå å°ç¬¬ä¸æ¹å å离
å¦é¢ï¼å¨nuxt.config.jsä¸é ç½®äºvendoråï¼æå ååºç°äºapp.chunkhash.jsï¼common.chunkhash.js,manifest.chunkhash.jsä½æ¯ææ³å°é¡¹ç®ç¨å°ç第ä¸æ¹åºåç¬æå æä¸ä¸ªæ件ï¼å¦ä½¿ç¨äºvue,axios,vuex,element-uiï¼ææææå åæ¯vue.js,axios.js,vuex.js,element-ui.jsãå°è¯ä½¿ç¨äºCommonsChunkPlugin没ææå
pyinstaller第ä¸æ¹å æå é®é¢
pyinstalleræå æ¶æ¥é:raiseJSONDecodeError("Expectingvalue",s,err.value)fromNonejson.decoder.JSONDecodeError:Expectingvalue:line1column1(char0)
3k
webpackå¦ä½æå 第ä¸æ¹åºçèµæº?
æå¨åä¸ä¸ªæ®éçä¼ ç»é¡¹ç®ï¼ç±äºä½¿ç¨äºes并ä¸ä¸äºé¡µé¢ä¸çå°ç»ä»¶ä½¿ç¨äºreactï¼æå 项ç®ä¸ºäºçäºå¿å°±ä½¿ç¨äºwebpackãåæ¥åç°jqueryçä¸äºæ件ä¸ä½¿ç¨äºéæèµæº(å¦jquery.jBox,ztreeççè¿äºæ件é½æèªå·±çå¾çåcss)ï¼è¿äºèµæºè¯¥å¦ä½å¤çå¢ï¼
javascriptä¸¥æ ¼æ¨¡å¼æ¥é
jsä¸¥æ ¼æ¨¡å¼ä½¿ç¨è´¹ä¸¥æ ¼æ¨¡å¼ç代ç æ¥é'caller','callee',and'arguments'propertiesmaynotbeaccessedonstrictmodefunctionsortheargumentsobjectsforcallstothems
3åç2.6ké 读?已解å³
Webpackå¦ä½æå 第ä¸æ¹çuiæ¡æ¶ï¼
æè¿å¨çwebpackï¼äºè§£äºåºæ¬åçãå®è·µä¸ä¹å¨åç¹ä¸è¥¿ãæ³é®ä¸ï¼å¦ænpmåºä¸æ²¡æçjsåºï¼éè¾¹æå¾çï¼æcssï¼æèªå·±çç®å½ç»æï¼è¯¥å¦ä½å¼ç¨è¿ç±»åºå°èªå·±ç项ç®ä¸å¢ï¼
2.8k
èªé¡¶åä¸å¦Reactæºç
ä»ç念å°æ¶æå°å®ç°å°ä»£ç ï¼éå½»ç解
å端æ§è½ä¼å设计é®
å端æ§è½ä¼å,é¢è¯çå¿ é®é¢ç®
vueè¿è¡æ¥éepf-fast@1.0.4devçæ¬ä¸ä¸è´ãvueçæ¬åvue-template-compilerçæ¬ä¸ä¸è´å°±ä¼åºç°è¿è¡æ¥éepf-fast@1.0.4devã解å³æ¹æ³ï¼
1ãå°node_modulesæ件夹å å é¤ã
2ãå°package.jsonæ件çVueçæ¬å·åvue-template-compilerçæ¬å·æ¹ä¸ºä¸è´ï¼2.6.7ï¼ï¼éé«ççæ¬ï¼éæ°è¿è¡npmrundevå³å¯ã
elementui源码学习之仿写一个el-timeline
本文记录了仿写el-timeline组件的细节,以深入理解饿了么UI组件的源码实现机制。本系列文章将持续更新,饿网源码识别深入探讨elementui源码的站源学习与实践。可访问开源仓库,码饿通过npm start运行代码,网站结合注释辅助理解。源码
时间线组件构成包括:时间线小圆点、饿网时间线竖线条、站源时间戳与具体内容详情四个部分。码饿如图所示。网站
时间线组件主要需求包括:按时间线正序或倒序展示、源码自定义时间线小圆点样式与颜色、使用小图标替代时间线小圆点、控制时间戳与具体内容详情的位置、时间戳的显示与隐藏。
对官方组件的见解包括:提供与注入可以简化、时间戳位置优化、pay网关源码简约封装参考其他库组件。Antd与iview的时间线组件参数较为精简。
回顾知识点:数组方法的使用,如this.$slots.default.reverse();以及`:style`中的四元表达式应用,如`:style="border: ${ elementIcon} ${ borderColor}"`。
组件代码示例如下:`myTimeline`、`myTimelineItem`。完整代码在开源仓库,欢迎访问并star。
若本文对您有所助益,美食行业源码期待您的star,感谢支持!
dayjs源码解析(一):概念、locale、constant、utils tags
深入剖析 Day.js 源码(一):概念、locale、constant、utils
Day.js 是一款轻量级的时间库,由饿了么的坐标转化源码开发大佬 iamkun 维护,主打无需引入过多依赖,以减少打包体积的特性。本文将通过解析 Day.js 的源码,揭示其结构与功能的奥秘,旨在为开发者提供深入理解与应用 Day.js 的工具。
目录概览
本文将分五章展开 Day.js 的源码解析,分别从代码结构、基础概念、时间标准、语言(文化)代码以及 locale、弹幕留言源码constant、utils 的实现进行深入探讨。我们将逐步揭开 Day.js 的核心逻辑与设计思路。
代码结构与依赖分析
Day.js 的源代码目录结构简洁明了,主要依赖集中在入口文件 src/index.js 中。此文件依赖链简单,未直接引用 locale 和 plugin 目录下的语言包与插件,体现出 Day.js 优化体积、按需加载的核心优势。
基础概念与时间标准
在解析源码之前,理解以下基础概念至关重要,包括时间标准、GMT、UTC、ISO 等。这些标准与概念为后续分析提供了背景知识。
时间标准解释
格林尼治平均时间(GMT)与协调世界时(UTC)是本文中的核心时间概念。GMT 作为本初子午线上的平太阳时,而 UTC 则是基于原子时标准,与格林威治标准时间(GTM)关系密切。本文详细解释了 UTC 的定义、用途与与 0 度经线平太阳时的关系。
ISO 标准
ISO 是国际标准化组织推荐的日期和时间表示方法。在 JavaScript 中,Date.prototype.toISOString() 方法返回遵循 ISO 标准的字符串,以 UTC 时间为基准。
语言(文化)代码与 locale
不同语言对时间的描述各具特色,Day.js 通过 locale 实现了多语言支持,用户可根据需求引入相应的语言包。本文介绍了语言代码与 locale 的关联,以及如何按需加载特定语言。
constant 与 utils
src/constant.js 和 src/utils.js 分别负责存储常量与工具函数。constant 文件中包含了时间单位与格式化的正则表达式,而 utils.js 则封装了一系列实用工具函数,用于简化时间操作。
总结与展望
本文完成了 Day.js 源码解析的第一部分,深入探讨了概念、locale、constant、utils 的实现。接下来,我们将分析 Day.js 的核心文件 src/index.js,解析 Dayjs 类的实现细节。欢迎关注后续内容,期待与您共同探索 Day.js 的更多奥秘。