CryptoJS.enc.UTF8 中文乱码

npm发布包步骤，以及踩过的坑（见红颜色标准）： 1.注册npm账号，并完成Email认证（否则最后一步提交会报Email错误） 2.npm添加用户或登陆：npm adduser 或 npm login

最近在做项目的时候，研究了mixins，此功能有妙处。用的时候有这样一个场景，页面的风格不同，但是执行的方法，和需要的数据非常的相似。我们是否要写两种组件呢？还是保留一个并且然后另个一并兼容另一个呢？ 不管以上那种方式都不是很合理，因为组件写成2个，不仅麻烦而且维护麻烦；第二种虽然做了兼容但是页面逻辑造成混乱，必然不清晰；有没有好的方法，有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能，使代码易懂，简单、清晰。

混入minxins：分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项。

Linux：Settings —> Editor —> Inspections —> General —> Duplicated Code Mac：Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。

顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构的时候，肯定看到过下面这样的结构：

svg-sprite-loader会把你的icon塞到一个个symbol中，symbol的id如果不特别指定，就是你的文件名。它最终会在你的html中嵌入这样一个svg， 你就可以像上面这样：

虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。

SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG<use> 元素在文档中任意位置“实例化”图标。 使用<use>元素实例化图标或任何其它的SVG元素或图像，给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决：使用<use>引入的内容添加样式受限的问题。 但是在开始之前，我们先快速浏览一下SVG的主要结构和分组元素，然后慢慢进入use的世界中，以及shadow DOM，然后重回CSS的怀抱。我们会逐步讲解为什么给<use>内容添加样式会比较麻烦，以及有什么好的解决方案。

更改svg颜色，重点是去掉fill属性才能自由的更改颜色

子元素有个flex-shrink属性，表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即