vsc

2024.4.12 下载源过期问题

一、报错情况 

1
2
3
4
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/webpack failed, reason: certificate has expired

npm的证书失效了，它不再支持自签名证书

二、解决方案

1
2
3
4
5
6
7
8
9
10
11
12
1.查看自己的下载源
npm config get registry
2.发现我们之前配置了下载镜像源为https开头的，
https://registry.npm.taobao.org/
3.执行命令清除npm缓存 
npm cache clean --force
4.执行命令取消ssl验证 
npm config set strict-ssl false
5.再次执行npm install ***，还不行可以尝试设置你的npm镜像源为http开头的，不使用https
npm config set registry http://registry.npm.taobao.org


配置node环境和包管理工具

1.npm,node 安装
Node的介绍与安装
Node.js是一个基于Chrome V8引擎的JavaScript运行时。它允许开发者使用JavaScript在服务器端运行代码，而不仅仅局限于浏览器环境。Node.js提供了丰富的内置模块和包管理器npm，使开发者能够轻松地构建和管理应用程序。Node.js在前端开发中广泛应用于构建工具、服务器端渲染、API开发等方面，为前端工程师提供了更多的技术选择和灵活性。

1
2
3
4
检查代码
node -v
npm -v

2.yarn 的安装

1
2
3
npm install --global yarn
yarn --version

  1. Webpack的介绍与安装
    Webpack： Webpack是一个模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）打包成一个或多个静态文件。Webpack通过模块化的方式管理项目中的各个模块，并根据配置文件进行打包和优化。它提供了丰富的插件和加载器，可以处理各种类型的文件，实现代码分割、压缩、懒加载等功能。Webpack还支持热模块替换（HMR），可以在开发过程中实时预览修改的效果。通过使用Webpack，前端工程师可以更好地组织和管理项目代码，提高开发效率和性能。
1
2
npm install webpack -g

4.Vue CLI的安装与介绍
Vue CLI是一个用于快速构建Vue.js项目的脚手架工具。它提供了一套完整的项目开发工具链，包括项目初始化、开发服务器、打包构建等功能。Vue CLI基于Webpack，并集成了Vue.js相关的插件和配置，使得前端工程师可以快速搭建和开发Vue项目。Vue CLI还提供了丰富的插件和模板，可以根据项目需求进行定制化配置。通过使用Vue CLI，前端工程师可以快速启动项目，统一项目结构和开发规范，并享受到Vue.js的开发优势。
全局安装Vue CLI

1
2
npm install -g @vue/cli

5.初始化Vue项目并运行

1
2
3
4
5
6
7
新建一个文件夹，在控制台输入
vue create vue2_test
选择vue2或者vue3的默认模板安装 (回车键)
安装好后，执行
cd vue2_test
npm run serve

Vue框架学习

渐进式JavaScript框架
vue是一个框架，也是一个生态。
官方文档：
地址

1
2
3
4
5
6
7
window版本:
yarn 与npm
npm i yarn //下到本磁盘中
npm i - global yarn //下载到全局
yarn add **


Vue和react对比

使用vue的不同方式：

1.无须构建步骤，渐进式增强静态的HTML
2.在任何页面中作为Web Components 嵌入
3.单页应用 SPA
4.全栈/服务器渲染 SSR
5.Jamstrack /静态站点生成 SSG
6.开发桌面端、移动端、webGL，甚至是命令行终端中的界面

vue API：选项式API和组合式API

Element-UI 主题样式更改

1
2
帮助文档:https://element.eleme.cn/2.7/#/zh-CN/component/custom-theme
在线生成工具:https://elementui.github.io/theme-chalk-preview/#/zh-CN