# vite-plugin-element-plus-dyn-theme

**Repository Path**: pan-zy/vite-plugin-element-plus-dyn-theme

## Basic Information

- **Project Name**: vite-plugin-element-plus-dyn-theme
- **Description**: 适用vite项目的element-plus动态主题生成/切换插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-15
- **Last Updated**: 2021-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-plugin-element-plus-dyn-theme


适用vite项目的element-plus动态主题生成/切换插件

## 注意

* 默认情况下, vite并不能在运行时检查ts/tsx的错误
* vite无法识别ts的枚举

## 已启用哪些特性

* ts
* tsx
* vue
* sass
* vue-router
* vuex
* element-plus
* git commit检查
* commit提交前的lint检查
* postcss
* 自动打tag，并生成changelog
* svg支持. 详见SvgIcon组件
* axios
* vue-request
* mock支持

## 命令说明

### yarn dev

本地开发运行

### yarn lint

使用eslint对代码执行风格检查

### yarn fix-lint

使用eslint对代码执行风格检查，并自动修复检查出来的问题

### yarn tsc

仅执行ts校验，不生成js

### yarn git-commit

用于代替`git commit`, 生成规范化`commit 消息`

### yarn build

执行构建命令进行生产环境打包(在打包之前会先执行ts的语法检查)

### yarn release-major

升级主版本号, 打tag, 并生成changelog

### yarn release-minor

升级小版本号, 打tag, 并生成changelog

### yarn release-patch

升级补丁版本号, 打tag, 并生成changelog

### yarn release

按默认规则自动升级版本号, 打tag, 并生成changelog

## 配置文件说明

### vite.config.ts

vite配置文件

### postcss.config.js

postcss配置文件

### tsconfig.json

ts配置文件，注意: isolatedModules这个已配置成true

### .env

用于设置自定义环境变量

## 关于环境变量的设置

* 公共的环境变量请设置在`.env`环境中
* 如果要使自定义的环境变量在ts中有更好的类型推导，请在`env.d.ts`中的ImportMetaEnv接口中进行类型声明
* 所有变量都要以: VITE_ 开头
* 如果要在不同环境下配置不同的环境变量值，请参考vite官网的[.env文件](https://vitejs.cn/guide/env-and-mode.html#env-%E6%96%87%E4%BB%B6)小节

## 其他说明

### 打包时的 minifying css 警告

打包时出现类似如下警告，原因是因为: `vite.config.ts`的`css.preprocessorOptions.scss.additionalData`配置导致，暂未找到解决方案，不影响使用也不影响打包的产出文件，就是打包时会出现这个警告。如果介意，请删除该配置，并改为手动引入方式

```
warnings when minifying css:
 > <stdin>:24:0: warning: "@charset" must be the first rule in the file
    24 │ @charset "UTF-8";
       ╵ ~~~~~~~~
   <stdin>:16:0: note: This rule cannot come before a "@charset" rule
    16 │ #app {
       ╵ ^
```

### 如何添加一个vuex的store

#### 在`src/store/types.ts`中添加`module store`中用到的方法名
内容类似这样
```ts
export const SET_COUNT = 'SET_COUNT'
export const DO_INCREMENT = 'DO_INCREMENT'
export const GETTER_DOUBLE_NUM = 'GETTER_DOUBLE_NUM'
```

#### 在`src/store/modules`文件夹新建一个`ts文件`

内容类似这样

```ts
import { ActionContext } from 'vuex'
import { RootState } from '@vue/runtime-core'
import { DO_INCREMENT, GETTER_DOUBLE_NUM, SET_COUNT } from 'store/types'

/**
 * 当前模块的state结构定义
 */
export interface OneModuleState {
  num: number
}

export default {
  state: (): OneModuleState => ({ num: 1 }),
  mutations: {
    [SET_COUNT](state: OneModuleState, payload: number) {
      state.num += payload
    }
  },
  actions: {
    [DO_INCREMENT](context: ActionContext<OneModuleState, RootState>, payload: number) {
      context.commit(SET_COUNT, payload)
    }
  },
  getters: {
    [GETTER_DOUBLE_NUM](state: OneModuleState) {
      return state.num * 2
    }
  }
}
```

#### 在`src/store/index.ts`中注册该模块

```ts
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { InjectionKey } from 'vue'
import oneModule from 'modules/OneModule'
import { RootState } from '@vue/runtime-core'

// 定义 injection key
// eslint-disable-next-line symbol-description
export const key: InjectionKey<Store<RootState>> = Symbol()
export const store = createStore({
  modules: {
    // >>>>>>>>>>> 注册模块, 注意这里的key名称要和`vuex.d.ts`中的key名称一致 <<<<<<<<<<<<<<
    oneModule
  }
})

console.log('store', store)

// 定义自己的 `useStore` 组合式函数
export function useStore() {
  return baseUseStore(key)
}
```

#### 在`src/vuex.d.ts`中声明模块state的`ts类型`

作用: 提供完备的类型推导

```ts
// eslint-disable-next-line no-unused-vars
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
import { OneModuleState } from './store/modules/OneModule'

declare module '@vue/runtime-core' {
  // 声明自己的 store state
  interface RootState {
    // >>>>>> 注册模块state的ts类型, 注意这里的key名称要和`src/store/index.ts`中的key名称一致 <<<<<<
    oneModule: OneModuleState
  }

  // 为 `this.$store` 提供类型声明
  // eslint-disable-next-line no-unused-vars
  interface ComponentCustomProperties {
    $store: Store<RootState>
  }
}

```

**p.s.** `useStore`请引入这个，而非`vuex`的

```
import { useStore } from 'store/index'
const store = useStore()
```