# 说明

脚手架全称：`Command-Line Interface` 译为命令行界面，基于终端文本界面，依靠输入命令执行



# 常见脚手架

- `vue`的`create-vue`、`vue-cli`
- `React`的`Create React App`

# 用途

- 研发提效
- 理解前端工程化

# 实现流程
## 前置基础知识

- Shell
操作系统提供的接口程序，用于接受用户输入的命令，交由操作系统内核执行并接收响应结果  

- Bash
作为`shell`的一个实现，用于执行用户输入的命令

- CLI
是`bash`的运行环境，其接受用户键盘输入，交给`Bash`执行，并将程序处理结果以文本形式展示

## 掌握NodeJS开发

根据脚手架应用场景，学习相关库：内置库、常用库、脚手架框架以及如何获取键盘输入、键盘监听、设置输出内容的文本颜色、命令交互等


# 理解脚手架

## EG

通过[cearte vue](https://github.com/vuejs/create-vue)创建项目

```bash
$ pnpm create vue@3
../../../.pnpm-store/v3/tmp/dlx-27156    |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../../.pnpm-store/v3/tmp/dlx-27156/node_modules/.pnpm
../../../.pnpm-store/v3/tmp/dlx-27156    | Progress: resolved 1, reused 1, downloaded 0, added 1, done

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\FrontEnd\CustomCli\vue\vue-project...

Done. Now run:

  cd vue-project
  pnpm install
  pnpm format
  pnpm dev

```

## 理解

```bash
pnpm create vue@3
```

`pnpm`: 主命令
`create`：commond
`vue@3`: commond的参数

```
pnpm create vue@3 --force

```

`--force`: 也称之为`option`,用于辅助脚手架确认在特定场景下用户的选择(配置)，此命令表示强制覆盖当前目录下的文件

```

pnpm create vue@3 --force -r [npm源]
```

`-r`: 指定`pnpm install`安装依赖时，是的镜像源

其它配置项： `pnpm create --help` 查询

## 流程

`pnpm create vue@3`

1. 检查模板是否存在于包注册表中
2. 如果模板存在，它将下载模板并将其解压缩到具有指定名称的新目录（或指定的目录）
3. 然后它将通过运行`pnpm init`在指定目录中初始化一个新项目
4. 可能会提示您输入一些附加信息，例如项目名称、描述、作者等
5. 最后，它将安装模板所需的所有依赖项。



从环境变量中查找的`node`

```
#!/usr/bin/env node
```

CustomCli-脚手架初识

# module

## 说明

解决单一状态树，项目解构复杂臃肿时；vuex提供模块功能将store分割为module，每个module都包含state、getters、mutations、actions以及子模块module



## 创建模块

1.  store下创建module文件夹，再在Modlue文件夹下创建模块文件

![module创建目录](https://cos.dwxzbz.com/vue2/vuex/module创建目录.png)

2.模块文件配置
配置同store实例中一样，导出
Eg  moduleA.js

```
    const moduleA = {
        state: {},
        getters: {},
        mutations: {},
        actions: {}
    }

    export default moduleA
```

1.  在index.js即store实例中注册模块

![module创建](https://cos.dwxzbz.com/vue2/vuex/20220831111426.jpeg)

## 访问模块中的数据

```
    this.$store.state.模块名(store中注册的模块名).数据名
```

Eg
![取数据](https://cos.dwxzbz.com/vue2/vuex/20220831111511.jpeg)

## 修改模块中的数据

使用mutations和commit提交

## 模块的局部状态

### 注意

除了state局部的，getters、mutations、actions都是全局

对于模块内部的mutation和getter，接收的第一个参数是模块的局部状态对象

对于actions和getters,其第三个参数为根store实例的数据

## 命名空间

默认情况下，模块内部的action、mutation和getter 是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出响应

通过添加namespaced\:true的方式使其成为带命名空间的模块，此时state、mutation、action、getter都是局部命名空间

![命名空间开启后修改数据](https://cos.dwxzbz.com/vue2/vuex/20220831111629.jpeg)

## 模块中使用辅助函数

### 步骤

1.  引入辅助函数
2.  正常使用即可

Eg

```
    ...
    computed:{
        ...mapState("模块名",["要获取的数据"])
    },
    methods:{
        ...mapMutations("模块名",["触发的函数"])
    }
```

VuexV3-Module

# mapState

## 说明

用于组件获取state中状态



## 使用方法

1.  引入vuex时将vuex的mapstate方法解构出来
```
    import {mapState} from 'vuex'
```

2.  mapState的函数执行结果为对象
    计算属性值需要为对象，而mapState的执行结果就是对象

```
    computed: mapState({
    msg: (state) => state.msg,
    }),
```

可以简写： 直接传一个字符串

```
      computed: mapState({
        msg: 'msg',
      }),
```

当映射的计算属性的名称与state的子节点名称相同时，可以直接传一个数组

```
      computed: mapState(["msg"]),
```

写其它计算属性
通过es6的扩展运算符将其拆为键值对

```
      computed: {
          ...mapState(["msg"]),
          some code
      }
```

## Eg

![mapState](https://cos.dwxzbz.com/vue2/vuex/20220831110858.jpeg)

# mapGetters

## 说明

用于组件获取getters中处理的数据

## 使用方法

1.  引入vuex时将vuex的mapGetters方法解构出来

    import {mapGetters} from 'vuex'

2.  计算属性中使用

*   扩展运算符拆分mapGetters
*   然后使用

## Eg

![mapGetters](https://cos.dwxzbz.com/vue2/vuex/20220831110934.jpeg)

# mapMutations

## 说明

用于组件提交mutations,相当于简化了this.\$store.commit方法

## 使用方法

1.  引入vuex时将vuex的mapMutations方法解构出来

```
    import {mapMutations} from 'vuex'
```

2.  methods中使用

*   扩展运算符拆分mapMutations
*   然后使用

## Eg

![mapMutations](https://cos.dwxzbz.com/vue2/vuex/20220831111004.jpeg)

# mapActions

## 说明

用于组件触发actions，简化store.dispatch()

## 使用方法

1.  引入vuex时将vuex的mapGetters方法解构出来

```
    import {mapActions} from 'vuex'
```

2.  计算属性中使用

*   扩展运算符拆分mapActions

*   然后使用

VuexV3-辅助函数

# action

## 说明

Action类似于mutation，不同在于：



*   Action提交的是mutation，然后通过store.dispatch方法触发commit变更状态，而不是直接变更状态
*   Action 可以包含任意异步操作

作用：
mutations只写同步操作，不写异步操作，而action则是解决方案
Eg
axios获取到结果，然后then中更改数据为请求结果
此时就无法写

## 使用步骤

### 1. 设置actions
```
      actions: {
        fnname(context,payload){
          //异步操作
          axios.get().then((res)=>{
            context.commit({type:"add",res,payload})
          })
        }
      },
```

Action函数接受一个与 store 实例具有相同方法和属性的 context对象，因此可以调用context.commit提交一个 mutation，或者通过context.state和context.getters 来获取state和getters

### 2.分发action

action通过store.dispatch()方法触发
```
    this.$store.dispatch('fnname',params);
```

### 执行流程说明

首先配置actions，然后组件通过dispatch方法触发actions，actions中的异步操作执行再将异步结果通过commit参数传递进去

### Eg

![actions](https://cos.dwxzbz.com/vue2/vuex/20220831110734.jpeg)

VuexV3-Actions

# mutations

## 说明

用于更改Vuex的store中的状态,即更改state中的数据的唯一方法是commit提交mutations



每个mutations都有一个字符串的事件类型(type)【即 fnname】和 一个回调函(handler)【callback】。这个回调函数就是实际进行状态(数据)更改的地方，并且它会接受state作为第一个参数

## 设置变更处理函数

### 说明

理解为事件注册，当触发一个类型为fnname的mutations时，调用mutations handler

### 语法
```
    mutations:{
        fnname(state){
            //改写state中数据  
            state.name = newvalue
            ...some code
        }
    }
```

## 提交变更处理函数

### 说明

只有提交后，才会调用mutations handler执行状态变更

### 语法
```
    this.$store.commit("fnname");
```

## Eg

![mutationsAndCommit](https://cos.dwxzbz.com/vue2/vuex/20220831110015.jpeg)

## 提交时传递参数

通过commit方法的第二个参数来传递参数

### 传入一个参数

直接commit方法第二个参数传入
![commit提交参数](https://cos.dwxzbz.com/vue2/vuex/20220831110104.jpeg)

### 传入多个参数

以对象形式通过commit方法第二个参数传入
此时mutations中fnname第二个形参建议写为payload
![commit提交多个参数](https://cos.dwxzbz.com/vue2/vuex/20220831110127.jpeg)

#### 简易写法

commit直接传入一个对象，第一个type规定提交的mutations，后续所有的都为传入的参数
![commit提交多个参数简易写法](https://cos.dwxzbz.com/vue2/vuex/20220831110148.jpeg)