AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-15 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端常见知识点汇总(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!

解决方式：


  • 因为npm7.x的版本比npm6.x更严格，两种解决方案：

1.降级到npm6.x

2.npm i --legacy-peer-deps

01958462aef0d5460f6a057b322e5ea0_cabaec4ad693e724b9085d92fb7905dc.png

文章标签：
JavaScript
前端开发
数据库
关键词：
node.js NPM
node npm
前端js
es6 JavaScript
前端webpack
小蜗牛耶
目录
相关文章
代码掌控者
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
58 1
你都不懂
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
59 0
2G冲浪词条
|
2月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
46 3
springboot解决js前端跨域问题，javascript跨域问题解决
廖小凡
|
2月前
|
自然语言处理 JavaScript 前端开发
[JS]知识点
本文介绍了JavaScript中的多个重要知识点，包括ES6、严格模式、类与对象、解构、跨域问题及入口函数等。文章通过详细示例和推荐的外部资源，帮助读者更好地理解和应用这些概念。内容持续更新中，适合初学者和进阶开发者参考。
廖小凡
23 2
[JS]知识点
左诗右码
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
57 4
土木林森
|
2月前
|
JavaScript 前端开发 安全
ECMAScript 6（以下简称 ES6）的出现为 JavaScript 带来了许多新的特性和改进，其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字，为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性，避免变量污染，增强代码可读性和安全性；`const` 用于声明不可重新赋值的常量，但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用，有助于实现不可变数据结构，提升代码质量。
土木林森
31 5
想飞的雪糕
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
185 1
廖小凡
|
2月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块，包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念，还推荐了相关博文供深入学习。特别强调了express模块的使用，包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案，并总结了一些通用设置。适合Node.js初学者参考学习。
廖小凡
50 1
土木林森
|
2月前
|
JavaScript 前端开发 开发者
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域，Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣，Vue.js以轻量级和易上手著称，适合快速开发小型到中型项目；Angular则由Google支持，功能全面，适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
土木林森
63 1
土木林森
|
2月前
|
JavaScript 前端开发 API
前端框架对比：Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架，介绍了它们的特点和优劣，并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手，适合小型项目；Angular结构化、功能强大，适合大型项目。
土木林森
51 1

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题
    825
  • 2
    npm install没问题，但npm run dev的时候报Node Sass version 6.0.1 is incompatible with ^4.0.0 ^5.0.0
    73
  • 3
    发布第一个npm包的过程记录
    89
  • 4
    nvm, node.js, npm, yarn 安装配置
    334
  • 5
    nvm,npm,yarn相关指令，前端配置准备
    66
  • 6
    npm指令
    62
  • 7
    npm install 太慢？解决方法
    7390
  • 8
    深入剖析NPM： Node包管理器的介绍和使用指南
    97
  • 9
    使用npm install时遇到问题:npm ERR! code ERESOLVE
    204
  • 10
    npm报错：npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED，npm ERR! npm ERR! If you are behind a
    214

    • 相关课程

    更多
  • JavaScript入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于Web前端的可用性优化
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发

    • 推荐镜像

    更多
  • NPM
  • composer
  • pypi
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月