vue学习第二天

       Vue 2 已于 2023 年 12 月 31 日停止维护。

  还是低估了vue的学习难度，本意是想着技多不压身，花个十来天就把它学会了，没想到还是挺难的。首先官网的简介以及快速上手环节就直接看不懂。

  吐槽1：上来就给你介绍两种书写风格，选项式和组合式API，大篇讲解差异。。。新手角色下你就让我做选择，而且还在没看懂两者差异的情况下，那不就一开局就稀里糊涂吗。

  吐槽2：快速上手中，用到了node、npm、vite（而不是webpack），这些都还好，然后执行npm create vue@latest就又开始让你做选择，是否使用ts语法？是否启用jsx？种种选择yes/no，excuse me？我就刚开始学，我怎么知道选哪个？

然后开始介绍通过CDN使用vue：

  接下来就开始学习CDN相关的概念（unpkg、jsDelivr），看完CDN的概念后，我一直有疑问为什么这些前端的js库等等要用CDN。

  jsDelivr 是一个免费开源的 CDN 解决方案，用于帮助加速Web上常用的静态资源的加载已达到加快网站访问速度的目的，常见的静态资源有JavaScript 库、jQuery 插件、CSS 框架、字体等等。这是在中国大陆唯一有 license 的公有 CDN，而且实际使用中的访问速度也是极快的。
  unpkg是一个内容源自npm的全球快速CDN。它部署在 cloudflare上，在大陆地区访问到的是香港节点。

  打开教程引用的地址 https://unpkg.com/vue@3/dist/vue.global.js  这不就是一个js文件吗，为什么非要通过网络拉取，文件也不大，下载到本地明显比从网络中拉取速度更快吧。而且离线环境也用不了CDN吧。

  又想了想，站在使用者的角度，比如你开发好了一个前端项目，部署在了北京的1.1.1.1节点上，使用者在南京的一个笔记本上想通过浏览器访问你的项目，你的项目如果没有配置CDN，那所有的页面资源就是从北京的1.1.1.1节点上获取；你的项目里的js中如果有配置CDN地址，那就会从这些地址中拉取一些资源；按照CDN好处的介绍，在互联网中从CDN的地址拉取资源会更快一些。如果使用者只会在内网环境或离线环境使用你的项目，那就没必要使用CDN。

  又又想了想，vue配置的CDN地址，为什么在南京的使用者必须要去访问？我只是想访问你的项目的内容，为什么还要去访问vue的资源？按理说我已经将前端代码编译打包部署了，跟vue就没有关系了啊，为什么还要去访问开发阶段依赖的资源？

  CDN工作原理以及使用CDN的好处-腾讯云开发者社区-腾讯云

  这篇文章讲解了CND相关知识，也许CDN的使用应该不是我们个人项目的开发者。但依旧还是疑点重重；不过存在即合理，只是你还没有接触到相关开发的场景。

  综上所述，想不通的东西我就暂时不用，我就老老实实通过npm使用vue吧。

这一天学习，还没有接触vue本身，但完成了如下工作：

1、下载node.js，最新版包含了npm；

官网下载地址：  Node.js — Download Node.js®

没什么好说的，下载完，执行 node --version

注意后缀，LTS和Current，LTS为长期支持版本

菜鸟教程网介绍的更详细： Node.js 安装配置 | 菜鸟教程

2、了解webpack、vite构建工具；

    工具链 | Vue.js

  官方文档给出两个脚手架的介绍：

  Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

  Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。

3、下载vue3；

  ⚠️ Vue CLI 现已处于维护模式!

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。 另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

推荐的创建命令：

   npm create vue@latest

可选插件：

Project name：------> 项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：demo。
Add TypeScript? ------> 是否加入TypeScript组件？默认值：No。
Add JSX Support? ------> 是否加入JSX支持？默认值：No。
Add Vue Router for Single Page Application development? ------> 是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
Add Pinia for state management? ------> 是否添加Pinia组件来进行状态管理？默认值：No。
Add Vitest for Unit testing? ------> 是否添加Vitest来进行单元测试？默认值：No。
Add an End-to-End Testing Solution?------> 是否添加端到端测试？默认值No。
Add ESLint for code quality? ------> 是否添加ESLint来进行代码质量检查？默认值：No。

      这块真的是无语不会选

之前项目的创建命令：

    npm install -g @vue/cli

    vue create hello-world          #vue3

     vue init webpack hello-world  #vue2

4、配置参数

     npm config list 查看默认配置

     npm config set registry https://registry.npm.taobao.org    配置淘宝地址

     等等网上给出的能加速开发的一些小tip。

   

第二天的学习总结下来就是一个词：混乱。感觉不成系统。vue一直在更新发展，但又背着沉重的历史包袱，要兼顾很多之前的工具链。官网给人的感觉想引导人们全面拥抱新技术新版本，但又被旧版本拖着。问题是现在的项目大部分都是旧版本开发的，在拥抱vue的时候，人们的创新精神已经用光，现在的惰性已经生成，不愿意再破釜沉舟一次。除非新版本后续发展给出巨大的惊喜。

问题汇总：

又一次使用npm install 拉去一个简单项目的依赖，报错说缺python2

找资料查吧 node-gyp和node-sass是什么东东

直接询问chatgpt，给出答案：

node-gyp是一个Node.js的构建工具，用于编译Node.js插件模块。node-sass是一个Node.js模块，用于将Sass文件编译成CSS文件。

Python 2是由于node-gyp和node-sass中使用了node-gyp工具，而node-gyp需要Python 2来构建一些本地插件。这是因为node-gyp在构建过程中需要访问Python 2的一些功能和库，因此需要Python 2的支持。

虽然Python 2已经停止维护，但由于历史原因和依赖关系，一些Node.js模块仍然需要Python 2来构建.

通义灵码的答案：

"node-gyp" 是一个由 Node.js 基金会维护的开源项目，它是一个用于在 Node.js 中编译 C++ 扩展模块的工具。它可以帮助开发者将 C++ 代码编译为可以在 Node.js 中运行的二进制模块。

"node-sass" 是一个由 Node.js 基金会维护的开源项目，它是一个 Sass 编译器，用于将 Sass 代码编译为 CSS 代码。它使用 libsass 库进行编译，该库是 Sass 的 C++ 实现。

在构建 node-gyp 和 node-sass 时，需要使用 Python 2，因为它们依赖于 Python 脚本来执行一些编译和构建任务。Python 是一种流行的脚本语言，它被广泛用于构建和自动化各种软件开发任务。在构建 C++ 扩展模块和 Sass 编译器时，Python 脚本可以用于执行一些自动化任务，例如配置构建环境、编译代码、运行测试等。因此，为了构建 node-gyp 和 node-sass，需要在计算机上安装 Python 2。

文心一言答案：

node-gyp和node-sass在Node.js开发中都有其特定的用途，而node-sass之所以需要Python 2，主要是与其底层的构建工具和依赖有关。

node-gyp是一个用Node.js编写的跨平台命令行工具，主要用于为Node.js编译本机插件模块。它扩展了由Chromium团队使用的gyp-next项目的功能，以支持Node.js原生插件的开发。当需要编译包含C++代码的原生模块时，node-gyp会起到关键作用。

而node-sass是一个Node.js模块，用于将Sass文件编译成CSS文件。Sass是一种CSS预处理器，它允许开发人员使用变量、嵌套规则、混合(Mixins)、继承等高级功能来编写更简洁、可维护的样式代码。node-sass是对LibSass库的封装，LibSass是一个用C++编写的Sass编译器。因此，在使用node-sass时，需要编译C++代码。

至于为什么node-sass需要Python 2，这主要是因为node-sass在构建过程中使用了gyp构建工具。gyp是基于Python 2开发的，因此它不支持Python 3。当node-sass需要编译C++代码时，就会调用gyp，而gyp则需要Python 2的环境来运行。所以，如果你想要使用node-sass，你需要确保你的环境中安装了Python 2。

好吧，本地下载python27，并设置 npm config set python xxx安装目录

接着 npm run serve发现又报以下错误

网上搜索解决方法，给出以下原因：

报错原因：
        主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制，nodeJs v17 之前版本没影响，但 V17 和之后版本会出现这个错误。

解决方法给了四种：

解决方案: （在不改变代码的情况下，可采用设置NODE_OPTIONS全局环境变量）
方案1：打开IDEA 终端，直接输入

Linux & Mac OS：export NODE_OPTIONS=--openssl-legacy-provider

Windows：set NODE_OPTIONS=--openssl-legacy-provider

也可手动操作：此电脑->右键（属性）-> 高级系统设置->环境变量->系统变量->新建NODE_OPTIONS：--openssl-legacy-provider； 如果重新启动项目未生效，重新启动电脑试一下。

方案2：打开IDEA 终端，直接输入（问题解决）
$env:NODE_OPTIONS="--openssl-legacy-provider"

方案3:卸载当前版本，安装合适的版本(node.js)

方案4:

解决方式（仅限 windows）:

在项目中 package.json 的 scripts 中新增 SET NODE_OPTIONS=--openssl-legacy-provider

本人使用方案4，解决了问题