# 学习笔记

**Repository Path**: sdwdjzhy/study-notes

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-06
- **Last Updated**: 2022-05-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 准备工作

## npm\nodejs

[下载 nodejs http://nodejs.cn/download/](http://nodejs.cn/download/)

安装完成后

cmd (管理员)下

```bat
REM 准备全局缓存文档，创建两个文件夹

mkdir F:\nodejs\node_global
mkdir F:\nodejs\node_cache
npm config set prefix "F:\nodejs\node_global" REM 表示全局的包存放地址
npm config set cache "F:\nodejs\node_cache" REM 表示全局的缓存的地址
npm config set registry https://registry.npm.taobao.org  REM 表示代理，或者说中国镜像地址

```

查看配置

```shell
npm config list
```

### www.npmjs.org

## yarn

```shell
npm i -g yarn


重新启动一个 CMD（管理员）窗口

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned


yarn config set registry https://registry.npm.taobao.org
REM yarn config set registry https://registry.yarnpkg.com

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
yarn config set cache-folder "F:\yarn\cache"
yarn config  set global-folder "F:\yarn\global"

REM 将 F:\yarn\global\node_modules\.bin
REM 添加到环境变量 Path 列表中。


```

### 简单部署的方法

在 `C:\Users\用户名\`下
创建`.npmrc`的 npm 配置文件

```npm
prefix=F:\nodejs\node_global
cache=F:\nodejs\node_cache
registry=https://registry.npm.taobao.org/
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
PYTHON_MIRROR=http://npm.taobao.org/mirrors/python
canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/
msvs_version=2022
```

_注意改成自己的盘符_

创建`.yarnrc`的 yarn 配置文件

```yarn
registry "https://registry.npm.taobao.org"
ELECTRON_BUILDER_BINARIES_MIRROR "https://npm.taobao.org/mirrors/electron-builder-binaries/"
ELECTRON_MIRROR "http://npm.taobao.org/mirrors/electron/"
PYTHON_MIRROR "http://npm.taobao.org/mirrors/python"
cache-folder "F:\\yarn\\cache"
canvas_binary_host_mirror "https://npm.taobao.org/mirrors/node-canvas-prebuilt/"
global-folder "F:\\yarn\\global"
msvs_version "2022"
sass_binary_site "http://cdn.npm.taobao.org/dist/node-sass"
```

_注意改成自己的盘符_

### 安装全局包

```sh

yarn global add rimraf @vue/cli npm-upgrade eslint
```

`rimraf`：快速删除文件、文件夹，`rm` 的强化版
`@vue/cli`： vue 的命令行
`npm-upgrade`: 更新项目依赖版本号
`eslint` : 项目检查拼写，校验

## 版本号定义

`a.b.c`:

> a:主版本号
> b:次版本号
> c:修订版本号

以`^`以主版本号为主，后边的不看，去 npmjs.org 上搜索最新的 `a.xx.xx` 的版本
以`~`以主版本号为主，后边的不看，去 npmjs.org 上搜索最新的 `a.b.xx` 的版本
直接版本号 就是固定搜索`a.b.c` 的版本

# vue2

## vue2 + vue-router + vuex + axios

## vue2 + vue-router + vuex + axios + element-ui

# vue3

## vue3 + vue-router + pinia + axios + element-plus + vite

## vue3 + vue-router + pinia + axios + ant-design-vue + vite

## vue3 + vue-router + pinia + axios + element-plus + vite + ts

## vue3 + vue-router + pinia + axios + ant-design-vue + vite + ts

## vue3 + vue-router + pinia + axios + element-plus + vue-cli

## vue3 + vue-router + pinia + axios + ant-design-vue + vue-cli

## vue3 + vue-router + pinia + axios + element-plus + vue-cli + ts

## vue3 + vue-router + pinia + axios + ant-design-vue + vue-cli + ts

# 配置项

## vue-cli

[文档](https://cli.vuejs.org/zh/guide/installation.html)

## vue-cli

[文档](https://cli.vuejs.org/zh/guide/installation.html)

# 第三方库

## lodash js 辅助操作库

[文档](https://www.lodashjs.com/)

### 常用函数

#### 防抖 debounce

## prettier

美化代码 [文档](https://www.prettier.cn/docs/index.html)

## webpack（相当棒的打包工具）

> 配置太过繁琐，由 vue-cli 配置了默认项，所以了解一下就行了
> js 打包工具，vue-cli 内置的打包工具 [文档](https://www.webpackjs.com/)

## Rollup（知道有这么个东西就行）

类似于 webpack 打包部分，但比 webpack 优化率高。vite 内置使用这个打包

## esbuild（可以忽略）

类似于 webpack 中的构建功能部分， 我感觉 rollup + esbuild 约等于 webpack
[文档](https://esbuild.github.io/)

## vite

一个开发服务器，它基于 原生`ES`模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

一套构建指令，它使用`Rollup`打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
[文档](https://cn.vitejs.dev/)

## babel

es6->es5,或者说，是将 js 草案，js 标准但是浏览器尚未实现的语法 转义成现有浏览器能支持的语法

[文档](https://babel.docschina.org/)

## qs

{ a:xx, b:xxxxx } <=> "a=xx&b=xxxx" [文档](https://www.npmjs.com/package/qs)

## axios

ajax 网络请求 [文档](https://www.axios-http.cn/docs/intro)

## windicss/Tailwind CSS

> 后者更新大版本后，没有继续跟进

后者先出来，但是运行效率低下，windicss 就根据原理，重新写了引擎，简单、快速

## 开发时候可能会用到的依赖包

### cross-env

给 `process.env`添加变量
例如 `cross-env aaa=xxx`,那么 `process.env.aaa` 就等于 `xxx`

# 打包原理

## ast 抽象语法树

打包一开始的处理就是，把 js 文件，通过语法解析器(babel)编译成各种适用打包工具的 AST，然后对 AST 进行分解分别处理
该引用的，就把文件引用进来变成块，然后组装起来，就成了最后的文件。根据组件的引用顺序，同步异步，分隔代码

# vscode 插件

## WindiCSS IntelliSense

ID: voorjaar.windicss-intellisense
说明: Intelligent WindiCSS tooling for VS Code
[文档](https://windicss.org/guide/installation.html)

# 一份精心策划的与 Vue 相关的很棒的东西清单

[https://github.com/vuejs/awesome-vue](https://github.com/vuejs/awesome-vue)

# electron / tauri

两个都是跨平台的桌面系统软件框架，前者自带 google 浏览器内核，使用 C++编写
tauri 比较新，使用 rust 语言写的，并不自带浏览器内核，而是使用现有系统上的浏览器内核，windows 上使用 WebView2, linux 上 webview，mac 上 webkit??? 反正是不自带浏览器内核，优点是，生成出来的包特别小。electron 因为自带浏览器内核，所以，打包的软件至少 100MB。