五、npm
5.1 安装
安装node.js时自动就会把npm安装好
D:\Code\VueCode\vuedemo\js>npm -v
8.5.0
5.1 总结
六、babel
6.1 安装
命令行安装
npm install --global babel-cli #查看是否安装成功 babel --version
下载成功
6.2 dist文件夹的作用
全称是distribution。
distribution英 [dɪstrɪ'bjuːʃ(ə)n]美 ['dɪstrə'bjʊʃən]: 发行版 n. 分布；分配
在某些框架中，因为开发和发布是的内容或者代码形式是不一样的（比如利用Grunt压缩等等)，
这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。
是最终放到服务器上的发布版本。
如果是放到开源去，一般放开发版，而不是发布版的，因为发布版通常是全部压缩优化过，不利于开源开发。
6.3 总结
七、模块化
7.1 ES5写法
7.2 ES6写法
因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
你在开发中遇到了什么问题？
模块化的代码不能在ES6中执行，后来通过查资料才知道通过babel将es6编译成es6再执行
D:\Code\VueCode\babeldemo>babel moduleses61 -d es611 moduleses61\01.js -> es611\01.js moduleses61\02.js -> es611\02.js D:\Code\VueCode\babeldemo\es611>node 02.js 获取数据列表 保存数据
转化后，执行成功
D:\Code\VueCode\babeldemo\es622>node 02.js
getList…
update…
7.3 总结
八、webpack
静态资源 ：可以理解为 前端 的固定页面，这里面包含HTML、 CSS 、 JS 、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面，如果想修改内容则必须修改页面，但是访问效率相当高。
打包成功
安装css加载工具
测试
8.1 总结
九、实战
部署流程
部署一个vue后端模板，我们和后端接口对接
部署流程如下：
运行模板
模板目录说明
assets目录下主要存放四种文件：文本文件、图像文件、网页文件（包括html中引用的js/ccs/jpg等资源）、音频视频文件。
十、Bug记录
使用vue下载依赖时出现无法下载等错误
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vue-admin-template@3.8.0 npm ERR! Found: html-webpack-plugin@4.0.0-alpha npm ERR! node_modules/html-webpack-plugin npm ERR! dev html-webpack-plugin@"4.0.0-alpha" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer html-webpack-plugin@"^3.0.0" from script-ext-html-webpack-plugin@2.0.1 npm ERR! node_modules/script-ext-html-webpack-plugin npm ERR! dev script-ext-html-webpack-plugin@"2.0.1" from the root project npm ERR!
解决方式：
- 因为npm7.x的版本比npm6.x更严格，两种解决方案：
1.降级到npm6.x
2.npm i --legacy-peer-deps
![node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘](https://ucc.alicdn.com/3rkpnpbboddyy/developer-article1611150/20240924/6d75171d53ae4374be44c9d91a3bd8f0.png?x-oss-process=image/resize,h_160,m_lfit)
