总结和记录最近遇到的一些坑
关于优化
前段时间公司要求做了些优化，但好久没做了，所以一边查一边改适应自己的代码，这边记录一下，防止下次忘了没地方去找：
1.如何开启webpack analyze
1.npm install --save-dev webpack-bundle-analyzer
2.vue.config.js中配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
，并且在module.exports中配置configureWebpack，并在configureWebpack添加plugins，这是一个数组，在plugins中添加new BundleAnalyzerPlugin(),代码如下：
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
2.如何在打包的时候进行vendors压缩
这部分内容其实大家也都会用了，我在网上查阅后发现很多表述不一，我通过对自己代码的修改做了一些调整，如果有需要的话，可以自己尝试一下：
1.我们首先需要在webpack.config.js文件中设置externals，如果是在vue框架下的话，就直接在vue.config.js中，找到module.exports，新增一个chainWebpack，然后添加externals，代码如下：
chainWebpack: config => {
config.set('externals', {
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios'
})
},
2.然后在main.js中删除我们引入的上一步中的externals中的部分，但是我这里实践出来发现，有可能因为版本的兼容性原因，会出现页面出现bug或者没有反应的情况，这里大家注意一下。
3.然后在页面中引入我们需要的资源，这个网络资源既可以去官网拿到，也可以在cdn上拿到，不过要注意版本哦，另外如果是多页面结构的情况，请记得在每个页面中都引入相应的js和css，这个时候你可以给在webpack中配置过的页面添加
<%= require('html-loader!./temple_script.html') %>
然后新建一个temple_script.html文件，将所有的引入放在一起引入，使代码更简洁。
4.最后运行就可以发现vendors的体积确实有变小。
关于cookie
这里说一个关于cookie的小知识点，我们日常经常会将数据存储到localStorage或者sessionStorage以及cookie中，但是在MDN中有一段关于cookie的作用域的解释：
为什么会注意到这里，因为在修改同事代码的时候，他在设置cookie的时候就设置了domain
,但我移除的时候没有注意，所以一开始怎么删都删不了
export function setToken(token) {
Cookies.set(TokenKey, token, { domain: '.xxxx.xxx' });//存在xxxx.xxx域名下,测试域名下是没有办法设置的，因此会无限跳转登录页面
}
所以在删除cookie的时候，也同样要注意，需要明确指定domain(path这里我没有指定也能删除成功，还是根据具体情况来吧，如果set中加了path，删除当然也需要)
export function removeToken() {
return Cookies.remove(TokenKey, { domain: '.xxxx.xxx' })
}
关于nvm
之前没怎么写过小程序，然后前段时间看taro蛮火的，就去尝试了一下，根据官方提示一步步操作了一边，，然后下载了nvm来管理node版本，但是之前没有用过nvm，发现用nvm可以解决一些问题：
1. nvm解决access
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@tarojs'
1.sudo + npm命令
2.通过下载nvm来解决每次需要sudo的情况
2.nvm在重启mac后失效
这个问题我发生了，然后在网上找到了有效的处理方法，具体原文找不到了，但参考如下：
-bash: npm: command not found
-bash: nvm: command not found
原因涉及到一个mac中的隐藏文件，你可以在admin文件夹中，使用shift+command+.这个组合操作，来显示隐藏文件，这个文件就是 .bash_profile，那么我们查看到这个文件没有了之后，就进行如下操作：
打开终端：
进入到根目录：cd ~/
创建bash_profile文件：touch .bash_profile
打开bash_profile文件：open .bash_profile
于是就会出现一个txt文件，编辑内容这部分很关键，我们在里面输入如下内容：
export NVM_DIR="$HOME/.nvm"
[ -s "NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh"
编辑完成，保存。
接下来在终端输入更新命令：
source .bash_profile
最后在执行npm或者nvm的时候就不会出现错误了。
3.node版本与本地冲突
但是在使用taro的时候，将node的版本更新到了15以上，当我再次回到自己的项目并执行npm run serve的时候，出现了node-sass-loader版本不对的情况，这其实是因为项目中的loader对应的是14版本的node，而当时用了15版本的，因此出现了这种报错：
nvm ls #查看目前nvm管理器下有什么版本的node，以及正在用的node版本
#结果如下
-> v15.3.0
default -> node (-> v15.3.0)
node -> stable (-> v15.3.0) (default)
stable -> 15.3 (-> v15.3.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/fermium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.23.0 (-> N/A)
lts/erbium -> v12.20.0 (-> N/A)
lts/fermium -> v14.15.1 (-> N/A)
那么这显然是不可以的，目前使用的15+的版本，只能对应node-sass的5以上的版本，如果你直接下载最新版的node-sass，就会造成一个错误，5.0的版本无法与4.0+版本相匹配，而4.0所对应的node版本是14+的版本，因此我们需要通过nvm install + '你需要的版本好'下载之后，就会自动切换到对应下载的版本，不过为了确认，最好还是nvm ls来查看一下，之后我们再在对应版本下下载node-sass，下载过程中可能会遇到冲突问题，我们可以使用推荐的npm audit fix来进行协调，最后在运行npm run serve就差不多可以运行啦，如果还遇到不可以的问题，按照error的提示来修改吧！
关于如何用纯css实现淡入淡出
前些时候，有个需求特效要求能把下拉框做成淡入淡出的效果，心想，这还不简单，直接jquery找个库或者element上用一下就得了呗，最后用了一个淡入淡出的库，结果出问题了，就是在页面尚未加载完成的时候，这个库是不生效的，所以在页面加载的时候，一开始即使出现了菜单栏，也没办法弹出子菜单，所以最后考虑还是用css来实现。
我们都知道，使用animation是可以做动画的，但是这里一个淡入淡出的效果用animation就太麻烦了，而transition也是可以监测到元素变化，并且在提供一个速度的变化，那么我们可以用这个效果来实现，这里要注意一点，也就是transition是无法监测到diplay：none的元素的，所以我们可以考虑用另外一个属性，也就是visibility这个属性，通过在hidden和visible之间来回变化作出效果，但是这个就比较直观，这时我们可以配合opacity这个属性，从0到1来回变化，最后配合transition的时间调整整个变化的效果，就能很好的时候这个淡入淡出的效果了
总结
今天文章提到的一些内容很杂，也是很多朋友都知道的，在网上也能找到很多资料，不过实践出真知嘛，就是一个记录自己一些坑，如果能帮助到大家就很高兴。另外很多知识已经忘记原文网址了，就没有贴出来，等我再去找找，有的会放上来，实在没找到的，就再次拜谢！
