vue学习第一天

  自学vue已经开始过好几次了，每次都是看个几页就搁置了。网上也下载了好几本教程。但又看到这几本教程评价一般，所以也是有一搭没一搭的看。鉴于最近互联网大环境众多的广进计划，危机感紧迫感焦虑感加重，今天终于下定决心学习一下vue。多一项技能好傍身。而且由于最近的人工智能工具的盛行，借助chatgpt以及通义灵码等工具，学习vue前端的时候也能锦上添花。

  首先还是先搞懂vue、node、npm、yarn等概念，还有最新vue3和vue2的区别，直接问chatgpt，给出答案：

node npm webpack vue是什么意思，都有什么关系

• Node.js：是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。Node.js 提供了一组内置的库和工具，使开发人员能够构建高性能的网络应用程序。

• npm：是 Node.js 的包管理工具，用于安装、管理和发布 JavaScript 包。开发人员可以使用 npm 来安装第三方库、工具和框架，以便在项目中使用。

• Webpack：是一个现代的 JavaScript 模块打包工具，用于将项目中的各种模块（如 JavaScript、CSS、图片等）打包成静态资源文件。Webpack 提供了强大的模块化能力和插件系统，使开发人员能够更高效地管理项目的依赖关系和资源。

• Vue.js：是一个流行的前端 JavaScript 框架，用于构建交互式的用户界面。Vue.js 提供了响应式数据绑定、组件化开发和虚拟 DOM 等特性，使开发人员能够快速构建现代的单页面应用程序（SPA）和动态网页。

这些技术之间的关系是：

• Node.js 提供了运行 JavaScript 代码的环境，使得开发人员可以在服务器端和命令行中运行 JavaScript。

• npm 是 Node.js 的包管理工具，用于管理项目中的依赖项。

• Webpack 可以与 npm 配合使用，用于打包和管理项目中的前端资源。

• Vue.js 是一个前端框架，可以通过 npm 安装并使用，同时可以使用 Webpack 来构建和打包 Vue.js 应用程序。

  举个不恰当的例子类比一下：JavaScript就好比英语，vue.js就好比英语歌曲套路。英语学好了，当然学英语歌曲会比较快，但如果你单纯只是想唱英文歌，那就没必要把所有英语都学通，因为学通英语就太耗费时间精力了；node.js就好比录音棚，npm就好比录音棚里的设备管理使用手册或者录音棚的工作人员，webpack就好比录制专辑的流程；你先学好一首英文歌曲，进入录音棚，根据工作人员的指示，把歌曲唱完，你的个人专辑就诞生了。

  了解完这些概念以后，我也终于回想起来之前每次放弃vue的原因：每次兴致勃勃的下载下来最新版node.js、npm、vue之后，拿了项目的前端代码npm install一下，再npm run dev一下，总是不能一下跑起来，总是报很多错。这对新手体验非常不好，每次耗费精力查资料改适配终于跑通了以后，学习的热情也被消减到了极致，最终放弃。

  这次，毫不意外，依旧是没有跑通，如下是我遇到的错误：

    1、npm install的时候报错，根据网上解决方案，删除node_modules，删除package-lock.json，从新npm install；

  2、npm run dev报错

根据报错关键字网上搜索，给出的方案如下：

 npm install -g increase-memory-limit

increase-memory-limit

之后再进行npm run dev

3、第二次的npm run dev依旧报错，报错如下：

这次的报错网上依旧也有人遇到，继续找方案：

替换"%_prog%" 为 %_prog% （去掉双引号）1.在node_module下的.bin文件夹中查找

修改后依旧跑不通，经历过这几次错误后，学习的热情已经减了一半。当然这些报错肯定是有解决的办法，但还是想吐槽一下vue的学习对新手太不友好了。

  如上的报错，网上虽然都给出了解决办法，但都模模糊糊，说不清楚前因后果，要么说版本兼容问题，但数下来vue、node、npm、webpack每个组件都有自己的版本，各个版本与其他组件的适配问题，随着版本更新的增加，那也是呈指数级的适配困难提升；要么说是缓存的问题，千篇一律的删node_modules和package-lock.json，新手删了也不知道删了啥，为啥删。总之就是糊里糊涂的好了，糊里糊涂的坏了。

  痛定思痛，我决定改变学习思路：

  1、不使用工作项目的代码直接跑；毕竟项目上的代码经历了时间的“积淀”“堆积”，跨过了vue2和vue3版本的时间进程，项目代码的修改都是vue2和3语法混着用的，参考可以，不好进行直接的学习。

  2、使用最新版本的语言学习：不要为了工作项目将就去学老版本的语言，老版本只会越来越老，重构是迟早的事，那还不如就紧跟时代潮流。

  3、框架大于语言的学习：不知道这样好不好，但至少学起来比较快，容易上手。但与之带来的隐患就是框架的报错信息总是比较模糊，定位起来比较难。

  4、做好问题解决的记录：没什么好说的，不重复犯错。即使很小的错误也记录下来。

  5、官网+GitHub