vue跨域配置、vue前端页面缓存、vue项目开发注意、登录页开发流程、淘宝镜像、本地测试dist文件、过渡动画、vue项目导入依赖不成功

vue.config.js配置跨域：====》修改了请求代理一定要重启项目！

module.exports={
	devServer:{
		proxy:{
			'/api':{
				target:'https://api.binstd.com/recipe/search',
				changeOrigin:true,
				pathRewrite:{
				"^/api":""
				}
			},
		},
	},
}

淘宝镜像：https://www.jianshu.com/p/ca869f112c8c
把png图片转换为ico图标：http://www.bitbug.net/

项目开发注意：
1、打开电脑的显示设置->缩放与布局->100% 重要！重要！重要！
2、接手别人vue项目，如果没有node.modules文件，需要在cmd输入（npm install）指令安装项目中的依赖包
登录页开发流程:
(1)规定路由=>
(2)elementui登录组件复制进去=>
(3)二次封装axios=>
(4)写好模拟数据mock.js=>
(5)对整个表单进行校验（validate）=>
(6)登录组件完善axios请求=>
(7)封装token=>
(8)跳转登录页

vue前端页面缓存

// home.vue
<template>
  ...
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>

本地测试dist文件

有些电脑上不能在编辑器里运行的，要在电脑终端上运行

npm i -g serve
cd /dist
serve

过渡动画

display:none;用这个隐藏元素是不会有过渡效果的

&:hover .str {
	// 不隐藏元素
	visibility: visible; 
	// 透明度：不透明
	opacity: 1;
}
.str{
	// 过渡
	transition: all ease-in-out .6s;
	// 透明度：透明
	opacity: 0;
	// 隐藏元素，原来的位置也没了
	visibility:hidden;
}

vue项目导入依赖不成功

参考文章：https://zhuanlan.zhihu.com/p/506596270
在失败项目路径下，输入以下命令导入依赖

npm install --legacy-peer-deps