# 22级学习笔记

**Repository Path**: yuanmatansuo/level-22-learning-notes

## Basic Information

- **Project Name**: 22级学习笔记
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 22级的笔记

## 概述

### Node.js(236页)

Node.js是一个基于谷歌V8引擎的JavaScript运行环境，使得JavaScript可以脱离浏览器在服务器环境运行。

### 全栈工程师

可以做前端、后端、运维 称之为全栈工程师

### 工程化

也叫项目化，形容项目很大，分模块。



## VUE学习

### vue的介绍

vue是vue.js的简称，是尤雨溪作为个人项目创建的，目前国内最火的前端框架。

### 开发工具

vscode官网

https://code.visualstudio.com/



## ES6+

### 基础语法

Var 、 Let 、 Const

函数作用域（function内生效）

Var

块级作用域（只在当前{}内生效）

Let  变量，和var类似

Const 常量，初始化就必须定义且不能修改



### 模板字符串

在模板字符串中用``来定义字符串，可以使用${}来嵌入js变量或表达式；



### 箭头函数

![image-20250304093927493](README.assets/image-20250304093927493.png)

箭头函数和普通函数没有本质的区别，只是在作用域有区别。

箭头函数没有自己的this，它的this继承外层的作用域，普通函数的this指向自己。



### 导入和导出（暴露）

import 用来导入一个模块

export 用于导出一个模块（函数、对象、指定文件、原始值等）







## Node.js

https://nodejs.org/zh-cn

点击下载

![image-20250304103928141](README.assets/image-20250304103928141.png)





### npm

包管理器，管理别人写好的js代码。可以下载下来直接使用。

```sh
常用命令
# 下载安装包
npm i 包名 
npm install 包名
# 卸载包
npm uninstall 包名 
# 查看项目有哪些包
npm list
# 更新项目所有的依赖包
npm update
```

因为npm的官方服务器在海外，所以下载会特别慢

解决方案一，把服务器指向阿里或其他国内镜像源

```
// 查看当前下载地址
npm config get registry
// 设置淘宝镜像的地址
npm config set registry https://registry.npmmirror.com/
// 查看当前的下载地址
npm config get registry
```

### npm趣味小练习

cowsay 控制台输出指定的话



### pnpm

https://pnpm.nodejs.cn/

比npm快两倍，使用方式和npm一模一样

```
pnpm i 包名 
pnpm install 包名
```

![image-20250304112543283](README.assets/image-20250304112543283.png)

```
npm install -g pnpm@latest-10

或者

npm install -g @pnpm/exe@latest-10
```



### 小练习

2D物理引擎matter.js

```
pnpm add matter-js
```

3D物理引擎cannon.js

```
pnpm add cannon-es
```

用你能想到的一切方法，实现一个球掉落的物理画面可以用2D也可用3D实现。（不允许抄同学的）

![img](https://pic.rmb.bdstatic.com/bjh/240908/dump/3ad6d0d68a0fb17b75086ef60d220570.gif)



![img](https://img.zcool.cn/community/01ef8959673ffda8012193a30a7d0a.gif)

## 通义AI插件



[通义灵码](https://tongyi.aliyun.com/lingma)，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。





## Vue工程化

### 前提

最新版本的node.js

和pnpm需要安装好

```sh
node -v #查看版本号
pnpm -v #查看版本号
```

执行官网让执行的安装命令

https://cn.vuejs.org/guide/quick-start.html

```
pnpm create vue@latest
```

![image-20250306095812560](README.assets/image-20250306095812560.png)

### 下载工程模板

```
cd Demo  //切换目录
pnpm install //根据模板内的package.json文件里面的依赖，下载对应的包
pnpm format // 模板代码进行格式化操作，方便阅读
pnpm dev // 通过开发环境启动项目

```

![image-20250306100132826](README.assets/image-20250306100132826.png)



![image-20250306100707624](README.assets/image-20250306100707624.png)

选择安装推荐扩展

![image-20250306100750289](README.assets/image-20250306100750289.png)

### 工程目录结构

![image-20250306102800043](README.assets/image-20250306102800043.png)

.vscode  开发工具对项目的相关配置，如字体大小，依赖插件等（不用管）

node_modules 是项目的依赖包，依赖文件 和package.json是对应的

public 放公共资源，静态文件的目录

src 放前端代码的目录

.git*** 是git仓库的配置文件（不用管）

index.html 页面（单页面应用）

package.json 包管理文件（pom.xml）

README.md 工程的说明书，一般给同事看的

vite.config.js 工程相关配置

## vscode官网

https://code.visualstudio.com/

### vscode的常见问题

1、权限不够

```
PS C:\Users\Administrator\Desktop\Demo> pnpm run dev
pnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_P
olicies。
所在位置 行:1 字符: 1
+ pnpm run dev
+ ~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess
```

解决方案

![image-20250306104632414](README.assets/image-20250306104632414.png)

打开powershell

![image-20250306104812953](README.assets/image-20250306104812953.png)

```
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```



![image-20250306113850968](README.assets/image-20250306113850968.png)



```vue
<template>
  <!-- 这里面写html代码 -->
  <div class="my-title">{{ msg }}</div>
  <Demo></Demo>
</template>

<script>
// 引入组件
import Demo from './Demo.vue'
// 这里面写js代码
export default {
  name: 'App',
  data() {
    return {
      msg: 'hello vue123123',
    }
  },
  components: {
    // 注册组件
    Demo,
  },
}
</script>

<style>
/* 这里面写css代码 */
.my-title {
  /* 要一个正方形的div背景是渐变，文字是绿色，有阴影效果 */
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, yellow);
  color: green;
  box-shadow: 0 0 10px #000;
  text-align: center;
}
</style>

```

```vue
<template>
  <div class="boll"></div>
</template>
<script>
export default {
  name: 'Demo',
}
</script>
<style>
.boll {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px #000;
  border-radius: 50%;
}
</style>

```