Element 2 組件源碼剖析之布局容器
- 2022 年 7 月 27 日
- 筆記
0x00 简介 前文分析过组件的 布局栅格化(Grid Layout) ，通过基础的 24 分栏，迅速简便地创建布局。 本文将介绍用于布局的容器组件，使用 Flexbox 功能将其所控制区域设定为特定的布局，方便快速搭建页面的基本结构。本文将深入分析组件源码，剖析其实现原理，耐心读完，相信会对您有所 …
Continue Reading
Vue+element搭建後台管理系統-二、安裝插件
- 2022 年 4 月 14 日
- 筆記
我们继续上一章的内容，上一章讲到我们已经能将项目成功跑起来了，那么我们接下来把项目必用的东西完善一下。 一、安装elementUI 终于到了我们的男二了，继续在VSCode中新建一个终端，然后通过这个命令来安装： npm i element-ui -S 至于为什么要-S呢？即--save（保存）包名 …
Continue Reading08.ElementUI 2.X 源碼學習:源碼剖析之工程化(三)
- 2021 年 6 月 8 日
- 筆記
0x.00 📢 前言 👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。 1️⃣ 源码剖析之工程化(一)：项目概览、package.json、npm script 2️⃣ 源码剖析之工程化(二)：项目构建、MD解析 3️⃣ 源码剖析之工程化(三)：打包配置 本系列文章主要通过解析elemen …
Continue Reading07.ElementUI 2.X 源碼學習:源碼剖析之工程化(二)
- 2021 年 6 月 7 日
- 筆記
0x.00 📢 前言 👇 项目工程化系列文章链接如下，推荐按照顺序阅读文章 👇。 1️⃣ 源码剖析之工程化(一)：项目概览、package.json、npm script 2️⃣ 源码剖析之工程化(二)：项目构建、MD解析 3️⃣ 源码剖析之工程化(三)：打包配置 前文对项目目录结构、 packag …
Continue Reading06.ElementUI 2.X 源碼學習:源碼剖析之工程化(一)
- 2021 年 6 月 3 日
- 筆記
0x.00 前言 在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件、发布npm以及生成展示文档之后。接下来将分析Element项目的代码结构，学习其工程化思想。 前端开发早已从瘦客户端（thin client）架构/中心服务器（server-centr …
Continue Reading05.ElementUI源碼學習:項目發布配置（github pages&npm package）
- 2021 年 4 月 27 日
- 筆記
0x00.前言 书接上文。项目第一个组件已经封装好，说明文档也已编写好。下面需要将说明文档发布到外网上，以此来展示和推广项目，使用 Github Pages 功能实现。同时将组件发布之 npm 上，方便直接在项目中安装使用。 0x01.Github Pages发布 进入项目的 Github repo …
Continue Reading04.ElementUI源碼學習:組件封裝、說明文檔的編寫發布
- 2021 年 4 月 21 日
- 筆記
0x00.前言 书接上文。项目经过一系列的配置,开发脚手架已经搭建完毕。接下来开始封装自定义组件、并基于 markdown 文件生成文档和演示案例。 后续文章代码会根据篇幅，不影响理解的情况下进行部分删减，详细代码可在 Github Repo 查看。 0x01.封装第一个组件 封装组件 接下来封装一 …
Continue Reading03.ElementUI源碼學習:程式碼風格檢查和格式化配置（ESlint ＆ Prettier）
- 2021 年 4 月 17 日
- 筆記
书接上文。在团队协作中，为避免低级Bug、以及团队协作时不同代码风格对彼此造成的困扰与影响，会预先制定编码规范。使用 Lint工具和代码风格检测工具，则可以辅助编码规范执行，格式化代码，使样式与规则保持一致，有效控制代码质量，实现项目代码风格统一。 在代码格式化方面， Prettier 和 ESLi …
Continue Reading02.ElementUI源碼學習:babel配置
- 2021 年 4 月 15 日
- 筆記
书接上文，接下来项目将引入babel支持ES6+语法兼容。 Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 中文官网 0x00.babel概念 Babel 是一个编译器（ …
Continue ReadingElement源碼:項目初始化和webpack配置
- 2021 年 4 月 14 日
- 筆記
0x00.项目初始化 由于整个过程像素级 copy element，所以将不使用 vue-cli 初始化项目。 创建项目 新建一个空的文件夹，使用 npm init 来初始化项目，并安装vue模块。 修改目录结构 根目录中添加文件夹 根目录下创建项目配置文件: .gitignore README.m …
Continue Reading