VUE包管理工具npm run dev与npm run buil

VUE包管理工具npm学习

npm run dev

可以理解为开发环境，运行需要node与npm环境，相当与在本地node中运行了一个前端服务器。

npm run build

构建工具，可以将前端的静态资源以及js源码打包并压缩，打包成一个新的静态的static资源文件夹，放在Web容器（Tomcat / Ngnix）中即可运行。由于是静态资源，可以直接替换web容器的static资源文件就能达到升级效果。

生成的静态文件：

[图片上传失败...(image-70f866-1608259299984)]

[图片上传失败...(image-865302-1608259299984)]

网络架构层面的区别：

npm run dev :

[图片上传失败...(image-2ac697-1608259299984)]

npm run build :

[图片上传失败...(image-ee5866-1608259299984)]

区别1：跨域

跨域是前后端分离项目中必然具有的问题，原因是浏览器的同源策略限制：只有在主机号，端口号，协议号相同的情况下才能做到资源的访问。因为前后端分离项目中，前端项目独立部署，假设当前前端项目192.168.1.100：8013地址，后端项目为192.168.1.100：8085，浏览器会将这两个地址识别为两个不同源，因此在前端资源中无法发起对后端的动态资源请求，产生跨域。

在dev模式下，由于node会在后台做动态资源转发操作，比如需要访问192.168.1.100：8085/hello资源，在浏览器的debug模式下会看到发送的地址是192.168.1.100：8013/hello，资源却能请求到，这就是因为dev模式下，node会帮我们转发，所以不会产生跨域问题。而在build模式下，没有node的参与，当浏览器在192.168.1.100：8013下访问192.168.1.100：8085/hello时，就会产生跨域问题。

区别2：前端服务器压力

使用dev模式需要前端服务器将所有的url请求进行转发，在生产环境肯定时不合理的，加上网络上的资源消耗，会大大增加服务器压力。

区别3：安全问题

安全可以说是一个共性问题，设想，在dev模式下，动态资源会在前端服务器上进行传输，如果黑客在该服务器上对动态交互的资源进行拦截与销毁、攻击，会大大增加系统用户数据的安全。

VUE中的#符号： 锚点的使用

在URL中，#代表定位符
1、井号在URL中指定的是页面中的一个位置
2、任务位于井号后面的字符都是位置标识符
3、改变井号后面的参数不会触发页面的重新加载但是会留下一个历史记录，即不会像后端服务器发起请求，但在后端的URL添加时需注意#的使用。

前端知识：防抖

让某个时间期限内，保证事件函数只执行一次的解决方案。debounce

学习管理学分析法：5个W1个H，what、when、where、why、who以及how

项目开发人员中注重why与how：再理解需求的基础上设计出怎样做，为什么这样做，优点在哪里？

学会向产品设计提出合理的质疑。