## @vueuse/core  




```js
一般写在：auth.ts

作用：useStorage 是 VueUse 的组合式 API，封装了对 localStorage / sessionStorage 的操作。

const TokenKey = 'Admin-Token';

const tokenStorage = useStorage<null | string>(TokenKey, null);

export const getToken = () => tokenStorage.value;

export const setToken = (access_token: string) => (tokenStorage.value = access_token);

export const removeToken = () => (tokenStorage.value = null);

```

## nprogress

```js
一个轻量级的 页面加载进度条插件。

打开网页时，通常在页面顶部会有一条细细的蓝色进度条（类似 YouTube、知乎 的加载条），就是它做的。

它常和 路由切换、异步请求 结合使用，给用户一个“正在加载”的反馈。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

configure 用来设置全局配置，showSpinner: false 表示 隐藏右上角的小转圈（默认是有的）。



NProgress.start()   // 开始进度条
NProgress.done()    // 结束进度条
NProgress.set(0.4)  // 设置进度到 40%
NProgress.inc()     // 自动前进一点

```

vue项目中的库

## nest项目创建

```js
文档：https://docs.nestjs.com/
$ npm i -g @nestjs/cli
$ nest new project-name



```

##  1.使用@nestjs/config

```js
pnpm i @nestjs/config croess-env dotenv


app.module.ts中使用
import { Module } from '@nestjs/common';
import { UserModule } from './user/user.module';
import { ConfigModule } from '@nestjs/config';
import * as dotenv from 'dotenv';

const envFilePath = `.env.${process.env.NODE_ENV || 'dev'}`;
@Module({
  imports: [
    UserModule,
    ConfigModule.forRoot({
      isGlobal: true,
      envFilePath,
      load: [() => dotenv.config({ path: '.env' })],
    }),
  ],
  providers: [],
})
export class AppModule {}

创建.env 配置文件
root=dev

创建enum文件夹配置config.enum.ts文件
export enum ConfigEnum {
  DB_HOST = 'DB_HOST',
  DB_PORT = 'DB_PORT',
  DB_USERNAME = 'DB_USERNAME',
  DB_PASSWORD = 'DB_PASSWORD',
  DB_DATABASE = 'DB_DATABASE',
  ROOT = 'root',
}

使用
import { ConfigService } from '@nestjs/config';
console.log(this.configService.get(ConfigEnum.ROOT));


package.json中使用
"start:prod": "cross-env NODE_ENV=prod nest start --watch",

```


## 2当配置文件过多

```js
使用 pnpm i js-yaml @types/js-yaml lodash cross-env @nestjs/config


1.创建configuration.ts配置文件用于加载config中配置
import { readFileSync } from 'node:fs';
import * as yaml from 'js-yaml';
import * as path from 'node:path';
import * as _ from 'lodash';
// 读取配置默认配置文件名称
const YAML_CONFIG_FILENAME_DEFAULT = 'env.yml';
const YAML_FILE_PATH_DEFAULT = path.resolve(
  __dirname,
  '../config',
  YAML_CONFIG_FILENAME_DEFAULT,
);
//读取当前运行环境配置文件
const env = process.env.NODE_ENV;
const YAML_FILE_PATH_ENV = path.resolve(
  __dirname,
  '../config',
  `env.${env}.yml`,
);

const comonConfig = yaml.load(readFileSync(YAML_FILE_PATH_DEFAULT, 'utf8'));
const envConfig = yaml.load(readFileSync(YAML_FILE_PATH_ENV, 'utf8'));

export default (): any => _.merge(comonConfig, envConfig);






2.app.module.ts中使用
import { Module } from '@nestjs/common';
import { UserModule } from './user/user.module';
import { ConfigModule } from '@nestjs/config';
import Configuration from './configuration';
console.log('print ~ Configuration:', Configuration);
// const envFilePath = `.env.${process.env.NODE_ENV || 'dev'}`;
@Module({
  imports: [
    UserModule,
    ConfigModule.forRoot({
      isGlobal: true,
      // envFilePath,
      load: [Configuration],
    }),
  ],
})
export class AppModule {}

3.创建config文件夹,env.yml

DB:
  host: 127.0.0.1
  port: 3306
  username: root
  password: root

4.package.json中使用
"start:prod": "cross-env NODE_ENV=prod nest start --watch",


5.使用
import { ConfigService } from '@nestjs/config';
console.log(this.configService.get(DB));
    
    
```

nest创建项目

## 1 config

```js
https://www.npmjs.com/package/config




支持yml格式，需要下载 npm install js-yaml -S
$ npm install config
$ mkdir config
$ vi config/default.json


{
  // Customer module configs
  "Customer": {
    "dbConfig": {
      "host": "localhost",
      "port": 5984,
      "dbName": "customers"
    },
    "credit": {
      "initialLimit": 100,
      // Set low for development
      "initialDays": 1
    }
  }
}

//使用
cross-env指定配置环境
npm install cross-env --save 
const config = require('config');
package.json 中配置
"scripts": {
    "prod": "cross-env NODE_ENV= production", //会使用production中的配置，合并default中的配置
  },
```

## 2 dotenv

```js
https://www.npmjs.com/package/dotenv

npm install dotenv cross-env --save

创建.env文件
require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working
```

npm好用的库

## MCP通信方式

```js
1.stdio
2.http
```



## node 模拟进程通信

```js
process.stdout.write("Hello, World!1\n"); //标准输出，可写流 

process.js 主进程
//创建子进程
const { spawn } = require('child_process');

const child = spawn("node", ["server.js"]);
//监听子进程标准输入
child.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});
// 标准错误
child.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});
//关闭
child.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

child.stdin.write('标准输入')


//server.js 子进程
process.stdin.setEncoding("utf8");

process.stdin.on("data", (chunk) => {
  console.log("子进程收到输入:", chunk.trim());
});


```

## 1. 生命周期

```js
sessionStorage

仅在 当前会话（session） 有效。

当页面关闭（标签页或浏览器关闭）后，存储的数据会被清除。

localStorage

数据会 长期保存，除非主动删除（代码里 removeItem 或 clear，或用户手动清除浏览器缓存）。

页面关闭或浏览器重启后，数据依然存在。


```

## 2. 作用范围

```js
sessionStorage

仅限于 当前标签页 有效。

即使同一浏览器里打开相同网站的另一个标签页，数据也不能共享。

localStorage

在 同源（协议+域名+端口一致） 的所有标签页和窗口之间共享。

```

## 3. 如果需要 跨域共享数据，通常有几种做法：

```js
后端接口：把数据存到服务器，由不同域名的页面去请求。

postMessage：通过 iframe 或 window.open 建立跨域通信，然后再读写数据。

cookie + 设置 domain：但 cookie 有大小和安全限制，而且要小心隐私问题。
```