前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)-3-阿里云开发者社区

前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)-3

2023-11-15 96

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)

五、npm

5.1 安装

安装node.js时自动就会把npm安装好

D:\Code\VueCode\vuedemo\js>npm -v

8.5.0

c5605e0c41a3a80b902aca2ecf99be6a_58bf42c5556802ecf5e17c5ed7f3b99a.png

5.1 总结

b753c0be163d08ba002526f393664ca9_1fca1da8ade9290027a5f7b3a57781c3.png

六、babel

6.1 安装

命令行安装

npm install --global babel-cli
#查看是否安装成功
babel --version

c8d49baf2ef2fe17a104354fb1acffde_1e9da663a4dc601b1d4a3f465d815926.png

下载成功

44c1073798c10c428cd1e2d97bc5a75c_a30a7abda5fc87376ef4d0a54b27510d.png

6.2 dist文件夹的作用

全称是distribution。

distribution英 [dɪstrɪ'bjuːʃ(ə)n]美 ['dɪstrə'bjʊʃən]: 发行版
n. 分布；分配

在某些框架中，因为开发和发布是的内容或者代码形式是不一样的（比如利用Grunt压缩等等)，

这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。

是最终放到服务器上的发布版本。

如果是放到开源去，一般放开发版，而不是发布版的，因为发布版通常是全部压缩优化过，不利于开源开发。

480851c9bf8ae3c61a95c98f43d01323_d82effec9e39df72f6fc93fee3e8b7eb.png

6.3 总结

520fcbe9e04fe353fd2cdf49f40b52b3_3abbe56b2a7b468548153adce3b747b1.png

七、模块化

7.1 ES5写法

6eeccc1d5f497502badb6ad51a222192_3fb3b1a9455907ae61884cf8ca07304d.png

7.2 ES6写法

因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。

你在开发中遇到了什么问题？

模块化的代码不能在ES6中执行，后来通过查资料才知道通过babel将es6编译成es6再执行

319e9c3fe9f486aa9243d222a2fa83e5_4d961e3349a018b97444275cd51e4962.png

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
获取数据列表
保存数据

354600a8f09860ee475308a0a4dfade2_f6ff3a1370b39bb142f3c66ec73a5196.png

转化后，执行成功

D:\Code\VueCode\babeldemo\es622>node 02.js

getList…

update…

7.3 总结

2067c008ae9bd28af872e10e69c6f9b8_60d6db5ad97d2d4671d39efb8d8f0fea.png

八、webpack

静态资源：可以理解为前端的固定页面，这里面包含HTML、 CSS 、 JS 、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面，如果想修改内容则必须修改页面，但是访问效率相当高。

642d0239b2e588363fec7900a4535270_0929dae71a98dd1cec4a2ee453b61a52.png

7825e00ca7b8c515da419d0afa1a22d2_9f130e76c08a7ebf84a20c0a971a9fd5.png

打包成功

cef6cb69d81c687f0ecfc7f519a3363e_0e63cdaa8909f1242ae6c99c78a87b5f.png

1175b265f62b2c472ad5b4fe2b80ed66_7dc27d874813a65a90044a84cb75e1b8.png

安装css加载工具

b80b2538f94008aeb45bd2e66bffd84e_5648e8ca500123534175ebbece311706.png

测试

0273cbaa0fc93a3d54e71fb4c5db8b94_b8688476c36ad6d89ee43528ebd61fe7.png

8.1 总结

cefa2d299da759e3864d4d08a5f75f69_d92630db54a7ae2e32d782577b6fcd4a.png

8877cbb447cde9176dbe0c2c87f2462c_c8c9db2928ab17664f3a93bd77a07f10.png

九、实战

部署流程

部署一个vue后端模板，我们和后端接口对接

部署流程如下：

93a880b9bbfaf46b36f168b7badc5bba_b67e317adfd7709762483046eda26c36.png

运行模板

d236f282a34ece902c6daeaf8bba62de_f2302ce03882635758196cdefb7d2307.png

模板目录说明

4b96328dd55d4d70aebfeb291e5c2f5f_d8706c1782dc1c1ea5938acc63b65a0b.png

assets目录下主要存放四种文件：文本文件、图像文件、网页文件（包括html中引用的js/ccs/jpg等资源）、音频视频文件。

cde328832db83b0ca2cd36e145959343_bea5cbe275d73d06e6ab6037b9e11004.png

d68305573ac723248dd9d4c484dfab93_32f6498524f078747ce398653c9ec58e.png

十、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!