记录：搭建属于自己的简单cli前言：一直很好奇为什么在命令行输入一些指令（例如vue create）可以创建项目，以及执

前言：一直很好奇为什么在命令行输入一些指令（例如vue create）可以创建项目，以及执行一些特殊的操作，这两天浅学了一下如何实现自己的cli项目，在这里记录一下。

目前想实现如下功能：

拉取我发布在github的vue模板（避免每次都需要重复配置，安装依赖，好麻烦）
通过命令行命令创建pinia store的模块
通过命令行命令创建components（待完成）
通过命令行命令创建pages，并且生成对应的route（待完成）

实现完成之后发布到npm，供自己方便使用~（如果功能大家觉得不错的话也可以下载来试试）

第一步：准备模板

我们准备的是vue3的模板，用vite init初始化一个项目

集成Element-Plus

安装Element-Plus，这里我们用的是npm。

在命令行执行npm install element-plus --save

安装完成后，安装另外两个插件实现按需引入，如下。

npm install -D unplugin-vue-components unplugin-auto-import

在项目的vite.config.ts文件内添加如下配置

配置完成后，运行项目，会自动生成下面两个文件

在使用的时候也不需要写导入语句，也能正常解析，如下所示。

安装自动导入css插件解决命令方式使用ElementPlus组件没有样式的问题npm i unplugin-element-plus -D

集成eslint和prettier

安装vue官方生态的插件:vue add @vue/cli-plugin-eslint,会出现下面两个步骤

完成后会自动生成两个文件

下面内容覆盖到.editorconfig文件中

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

安装prettier npm install prettier -D，创建.prettierrc和.prettierignore文件，如下所示

安装插件解决prettier和eslint冲突：npm i eslint-plugin-prettier eslint-config-prettier -D

在.eslintrc.js中对安装的解决冲突的插件进行配置

配置自动导入插件

上面为了实现按需引入，我们集成了unplugin-vue-component以及unplugin-auto-import插件，但是他的功能更加强大，可以让我们连import {ref} from 'vue'这种的导入文件也不需要写。我们需要进行如下配置。

先将enabled设置为true，运行项目，生成完文件之后改为false即可（也可以一直是true，但是会不停的生成）

在.eslintrc.js中配置

将auto-imports.d.ts加入到tsconfig.json中，就不会报错了。

配置完成之后我们可以直接使用内置的api而不需要进行导入，如下所示。

配置别名

在vite.config.ts中添加如下配置

在tsconfig.node.json中添加如下配置（允许使用esm的方式导入path模块）

在tsconfig.json中添加如下配置（防止在使用@作为别名的时候报错）

集成vue-router路由管理库

执行命令 npm install vue-router@next安装vue-router

创建pages文件夹，创建index.vue页面，为默认路由做准备

创建router文件夹，创建router对象并导出

在main.ts中安装插件

集成pinia状态管理库

执行命令安装pinia： npm install pinia

在main.ts中安装插件

创建stores文件夹，保存所有的store对象定义。

定义一个main store，下面这个例子将说明如何使用pinia（比vuex好用太多了有没有！）

在使用的时候可以通过storeToRefs来解构成对应的ref，如下所示。

集成并封装axios

npm i axios

新建service文件夹，结构如下

request文件夹用于封装axios，代码如下

/service/request/index.ts

import axios from 'axios'
import { AxiosInstance, AxiosRequestConfig } from 'axios'
import { wjjRequestConfig, interceptor } from '@/service/request/type'
export class wjjRequest {
  //保存axios实例
  instance: AxiosInstance
  //保存属于每个axios实例特有的拦截器函数
  interceptor?: interceptor

  constructor(config: wjjRequestConfig) {
    this.instance = axios.create(config)
    this.interceptor = config.interceptor

    //从config中取出的，实例特有的拦截器
    this.instance.interceptors.request.use(
      this.interceptor?.requestOnFulfilled,
      this.interceptor?.requestOnRejected
    )

    this.instance.interceptors.response.use(
      this.interceptor?.responseOnFulfilled,
      this.interceptor?.responseOnRejected
    )
  }

  //传入泛型，用户可以指定返回的Promise的值的类型
  request<T = any>(config: AxiosRequestConfig): Promise<T> {
    return new Promise((resolve, reject) => {
      //request指定第二个泛型为传入的泛型，可以指定request返回的Promise的值的类型
      this.instance.request<any, T>(config).then(resolve, reject)
    })
  }

  get<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'GET' })
  }

  post<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'POST' })
  }

  delete<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'DELETE' })
  }
  put<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.request<T>({ ...config, method: 'PUT' })
  }
}

/service/request/types.ts

import { AxiosRequestConfig, AxiosResponse } from 'axios'

export interface interceptor {
  requestOnFulfilled?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestOnRejected?: (err: any) => any
  responseOnFulfilled?: (config: AxiosResponse) => AxiosResponse
  responseOnRejected?: (err: any) => any
}

//实例也可以传入自定义的interceptor拦截器，这个对象的类型是自定义的interceptor类型
export interface wjjRequestConfig extends AxiosRequestConfig {
  interceptor?: interceptor
}

/service/index.ts 创建axios实例

//统一出口
import { wjjRequest } from '@/service/request'
const isLoading = ref(false)
//创建axios实例
let timer: any = null
const request_util = new wjjRequest({
  baseURL: process.env.VUE_APP_BASE_URL,
  interceptor: {
    // 请求成功拦截
    requestOnFulfilled(config) {
      isLoading.value = true
      return config
    },
    // 响应成功拦截
    responseOnFulfilled(res) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        isLoading.value = false
      }, 500)
      return res.data
    }
  },
  timeout: 5000
})

export { request_util, isLoading }