Chalk

在上篇文章 《2021新年 Vue3.0 + Element UI 尝鲜小记》 里，我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目，而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。 Webpack 无需过多介绍，一个十分强大的打包工具。但 Webpack 也有不足的地方，比如第一次打包需要很长时间，修改代码之后的热更新速度较慢。 随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。Vite 主要的优势有三点： 快速冷启动服务器 即时热模块更换（HMR） 真正的按需编译 听上去就很不错，立刻上手尝试一下。 初始化 Vite 项目 使用 npm init @vitejs/app my-vue-app --template vue 命令快速生成一个使用 Vite 构建的 Vue 3 项目模版。 运行 npm run dev 即可把项目跑起来，进入开发模式。项目冷启动速度非常快，不到 1 秒钟，浏览器里就已经出现项目预览了。项目冷启动只用了 382ms ，真香。 引入 Element Plus UI 组件库 开发项目，首先要挑选一个 UI 组件库。目前市面上支持 Vue

年底了，总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题都是超链接，可点击自行查阅） 希望能对您有用！ 如有意思的 轮子 可以在评论列出一起讨论下 color ==功能==：JavaScript库，用于不可变的颜色转换和对CSS颜色字符串的支持。 npm install color var color = Color('#7743CE').alpha(0.5).lighten(0.5); console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)' console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ] console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 } uuidjs ==功能==：UUID.js-JavaScript的RFC兼容UUID生成器 // Create a version 4 (random number-based) UUID object var objV4 = UUID.genV4(); // Create a version 1 (time-based) UUID object var objV1

原来发布在掘金，搬过来好了。 微信小程序在PC端是加密存储的，如果直接打开是看不到什么有用的信息的，需要经过解密才可以看到包内具体的内容。本文使用nodejs实现解密算法，主要涉及到crypto, commander, chalk三个包的使用。 小程序的源码在哪里 PC端打开过的小程序会被缓存到本地微信文件的默认保存位置，可以通过微信PC端=>更多=>设置查看： 进入默认保存位置下的/WeChat Files/WeChat Files/Applet文件夹，可以看到该目录下有一系列前缀为wx的文件（文件名其实是小程序的appid），这些就是我们打开过的小程序啦： 进入其中某个小程序的文件夹，我们可以看到一个名字为一串数字的文件夹。点进这个文件夹， 就可以看到一个__APP__.wxapkg文件，也就是小程序对应的代码啦： 然而，当我们打开这个文件之后却发现是这样的： WTF 这能看出来个🔨。很明显，这个文件是经过加密的，需要解密才能看到我们想看到的东西。 PC端小程序是怎么被加密的 这里参考了一位大佬用Go语言写的 PC端wxapkg解密代码 。整理一下的话，加密流程是这样的： 首先将明文代码在第1024字节处一分为二，前半部分使用CBC模式的AES加密，后半部分则直接进行异或。最后，将加密后的两节拼接起来，并在最前边写入固定的字符串："V1MMWX"。 所以，我们打开__APP__

前言：这个网站持续更新中...，有网上预览，github上也有源码，喜欢记得star哦，欢迎留言讨论。 网站地址： 我的个人vue+element ui demo网站 github地址： yuleGH github (喜欢记得star哦) 附：element ui 文件下载地址 https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/index.css https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/fonts/element-icons.woff https://unpkg.com/element-ui@2.4.7/lib/theme-chalk/fonts/element-icons.ttf https://unpkg.com/element-ui@2.4.7/lib/index.js 这里就贴图展示一下（ps：图片可能不是最新的，建议直接看网站）： 一、关于我 关于网站：致力于将平时自己用到的记录下来，形成demo...查看源码请到github，喜欢记得star哦 二、表格相关 1、所有的打印数据，均在打印区里。 表格上是否有钱这列是el-checkbox，绑定了v-model 2、同样借用element官网上的demo数据，但是和官网上的不同 三、弹出框相关 1

全文3928字，阅读时间 10分钟，未来节约时间 15分钟/每天 代码片段（code snippet） 相信大家都或多或少有接触过。 在完成一个项目以后，往往都会写出许多有价值的代码，或是 绞尽脑汁解决的难题 ，或是 灵光一现的小技巧 ，又或是需要给组里的人 分享经验，分享代码 。 对于我而言，我有时确实会把足够酷炫或者自豪的项目封装成一个包（例如npm或者是nuget等等），但面对粒度再小一点的一个function甚至是一行代码就不太合适了。 我自己遇到困难的几个场景 electron-builder 打包后，为了修改electron国内镜像下载地址，往往会配置vue.config.js。这个地址很长一段时间都不会变，包括这个配置的结构等主要内容其实都不太会变，每次要写的时候都会忘记，在找了好一会之前写的代码后，终于找到了之前的配置文件， 复制-粘贴 我的vue项目中会使用vuetify，而vuetify的各种配置都会写在一起，说复杂也不复杂，但我没有记，每次都是用到的时候打开官网然后， 复制-粘贴 还有一些其他配置文件，例如 axios，echart，signalr等配置文件，大部分情况下都不需要修改，直接， 复制-粘贴 .... 为了能够减少以上重复工作，提高效率，我也尝试过不少办法 制作 项目模板 ，使用vue init 来初始化项目 使用 github gist

全文3928字，阅读时间 10分钟，未来节约时间 15分钟/每天 代码片段（code snippet） 相信大家都或多或少有接触过。 在完成一个项目以后，往往都会写出许多有价值的代码，或是绞尽脑汁解决的难题，或是灵光一现的小技巧，又或是需要给组里的人分享经验，分享代码。 对于我而言，我有时确实会把足够酷炫或者自豪的项目封装成一个包（例如npm或者是nuget等等），但面对粒度再小一点的一个function甚至是一行代码就不太合适了。 我自己遇到困难的几个场景 electron-builder 打包后，为了修改electron国内镜像下载地址，往往会配置vue.config.js。这个地址很长一段时间都不会变，包括这个配置的结构等主要内容其实都不太会变，每次要写的时候都会忘记，在找了好一会之前写的代码后，终于找到了之前的配置文件，复制-粘贴 我的vue项目中会使用vuetify，而vuetify的各种配置都会写在一起，说复杂也不复杂，但我没有记，每次都是用到的时候打开官网然后，复制-粘贴 还有一些其他配置文件，例如 axios，echart，signalr等配置文件，大部分情况下都不需要修改，直接，复制-粘贴 .... 为了能够减少以上重复工作，提高效率，我也尝试过不少办法 制作项目模板，使用vue init 来初始化项目 使用 github gist 在vscode 中使用code

项目里经常会用到，在一个多选下拉框里新增一个选择所有的选项，例如: <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title > Document </ title > < script src ="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></ script > < link rel ="stylesheet" href ="https://unpkg.com/element-ui/lib/theme-chalk/index.css" > < script src ="https://unpkg.com/element-ui/lib/index.js" ></ script > </ head > < body > < div id ="app" > < el-form > < el-form-item > < el-select placeholder ="请选择活动区域" multiple v-model ="citys" > < el-option v-for ="item in cities" :label ="item.label" :value ="item.value" :key ="item

Vue 打包后自定义样式无法覆盖 elementUI 组件原有样式问题 by: 授客 QQ ： 1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址： https://nodejs.org/en/ 问题描述 如下为基于elementUI Dialog编写的一个组件，以npm run dev方式运行vue 项目时，自定义样式可以覆盖elementUI组件原有样式，但生产环境运行npm run build打包后的vue项目时，自定义样式却不起作用了。 原因分析 css样式存在引入顺序问题，引入App之后引入的ElementUI样式 解决方法 修改main.js，调整组件引入顺序 import ElementUI from"element-ui" import "element-ui/lib/theme-chalk/index.css" //确保在import APP之前引入 ...略 import App from"./app/App" import router from"./router"// 最后引入路由 来源： oschina 链接： https://my.oschina.net/u/4336916/blog/4297171

公司的elementUI 的Dialog 需要能移动, 原生的不能移动, 自己就开发了一个, 大家复制代码到html 里面就可以直接运行了. 调试了好久, 还能凑合用 <!DOCTYPE html> < html lang ="zh" > < head > < meta charset ="UTF-8" > < title > Title </ title > <!-- import CSS --> < link rel ="stylesheet" href ="https://unpkg.com/element-ui/lib/theme-chalk/index.css" > < style media ="screen" type ="text/css" > #appLoading { width : 100% ; height : 100% ; } #appLoading span { position : absolute ; display : block ; font-size : 50px ; line-height : 50px ; top : 50% ; left : 50% ; width : 200px ; height : 100px ; -webkit-transform : translateY(-50%) translateX(-50%) ;

问题： I'm using JavaScript to pull a value out from a hidden field and display it in a textbox. 我正在使用JavaScript从隐藏字段中提取值并将其显示在文本框中。 The value in the hidden field is encoded. 隐藏字段中的值被编码。 For example, 例如， <input id='hiddenId' type='hidden' value='chalk & cheese' /> gets pulled into 被拉入 <input type='text' value='chalk & cheese' /> via some jQuery to get the value from the hidden field (it's at this point that I lose the encoding): 通过一些jQuery从隐藏字段中获取值（此时我失去了编码）： $('#hiddenId').attr('value') The problem is that when I read chalk & cheese 问题是，当我阅读 chalk & cheese chalk & cheese from the hidden field,